jQuery를 사용하여 요소를 뷰로 스크롤하려면 어떻게 해야 합니까?
이미지가 그리드 형식으로 표시된 HTML 문서가 있습니다.<ul><li><img...브라우저 창에는 세로 스크롤과 가로 스크롤이 모두 있습니다.
질문:이미지를 클릭할 때<img>그러면 내가 방금 클릭한 이미지가 있는 위치로 전체 문서를 스크롤하려면 어떻게 해야 합니까?top:20px; left:20px?
비슷한 게시물을 찾아봤어요비록 자바스크립트에 익숙하지 않아서 어떻게 이것이 나 자신을 위해 달성되는지 알고 싶습니다.
모든 주요 브라우저에서 지원되는 DOM 방법은 요소를 뷰포트의 상단/왼쪽에 정렬하거나 가능한 한 가깝게 정렬합니다.
$("#myImage")[0].scrollIntoView();
지원되는 브라우저에서 다음 옵션을 제공할 수 있습니다.
$("#myImage")[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
또는 모든 요소에 고유 ID가 있는 경우 다음을 변경할 수 있습니다.hash뒤로/앞으로 버튼 지원을 위한 개체 속성:
$(document).delegate("img", function (e) {
if (e.target.id)
window.location.hash = e.target.id;
});
그 후에, 그냥 조절하세요.scrollTop/scrollLeft by 20은 다음과 같습니다.
document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;
어떻게 작동하는지 알고 싶으시면 제가 차근차근 설명해드리겠습니다.
먼저 이미지의 클릭 핸들러로 함수를 바인딩합니다.
$('#someImage').click(function () {
// Code to do scrolling happens here
});
그러면 클릭 핸들러가 이미지에 적용됩니다.id="someImage"모든 이미지에 대해 이 작업을 수행하려면 대체'#someImage'와 함께'img'.
이제 실제 스크롤 코드의 경우:
(문서를 기준으로) 이미지 오프셋을 가져옵니다.
var offset = $(this).offset(); // Contains .top and .left에서
top그리고.left:offset.left -= 20; offset.top -= 20;이 의 스 상 단 및 좌 스 롤 측 크 속 애 이 CSS 션 화 합 메 니 다 니 제 을 성 크 롤 ▁css - ▁and left - ate ▁proper ▁the ▁now ▁scroll top ties ▁scroll 이 ▁of ▁anim 제 의 다 스니 합 화 크 션
<body>그리고.<html>:$('html, body').animate({ scrollTop: offset.top, scrollLeft: offset.left });
내가 본 것 중 가장 간단한 솔루션
var offset = $("#target-element").offset();
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
}, 1000);
요소를 뷰로 직접 스크롤하는 방법이 있지만 요소에서 상대적인 점으로 스크롤하려면 수동으로 스크롤해야 합니다.
클릭 핸들러 내에서 문서를 기준으로 요소의 위치를 가져옵니다.20및 사용:
var pos = $(this).offset();
var top = pos.top - 20;
var left = pos.left - 20;
window.scrollTo((left < 0 ? 0 : left), (top < 0 ? 0 : top));
jQuery.scrollTo 플러그인을 확인합니다.여기 데모가 있습니다.
이 플러그인에는 네이티브 스크롤 IntoView가 제공하는 것 이상의 다양한 옵션이 있습니다.예를 들어, 스크롤을 부드럽게 설정한 다음 스크롤이 완료될 때 콜백을 설정할 수 있습니다.
또한 "스크롤" 태그가 지정된 모든 JQuery 플러그인을 볼 수 있습니다.
내장된 브라우저 기능을 잘 매핑할 수 있는 빠른 jQuery 플러그인은 다음과 같습니다.
$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); };
...
$('.my-elements').ensureVisible();
시행착오 끝에 이 기능을 생각해냈고, iframe에서도 작동합니다.
function bringElIntoView(el) {
var elOffset = el.offset();
var $window = $(window);
var windowScrollBottom = $window.scrollTop() + $window.height();
var scrollToPos = -1;
if (elOffset.top < $window.scrollTop()) // element is hidden in the top
scrollToPos = elOffset.top;
else if (elOffset.top + el.height() > windowScrollBottom) // element is hidden in the bottom
scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom);
if (scrollToPos !== -1)
$('html, body').animate({ scrollTop: scrollToPos });
}
내 UI는 엄지손가락 모음 안에 세로 스크롤 목록이 있습니다. 목표는 현재 엄지손가락을 엄지손가락 모음의 중앙에 바로 세우는 것이었습니다.저는 승인된 답변에서 시작했지만, 현재 엄지손가락의 중심을 잡기 위한 몇 가지 수정 사항이 있다는 것을 발견했습니다.이것이 다른 누군가에게 도움이 되기를 바랍니다.
마크업:
<ul id='thumbbar'>
<li id='thumbbar-123'></li>
<li id='thumbbar-124'></li>
<li id='thumbbar-125'></li>
</ul>
jquery:
// scroll the current thumb bar thumb into view
heightbar = $('#thumbbar').height();
heightthumb = $('#thumbbar-' + pageid).height();
offsetbar = $('#thumbbar').scrollTop();
$('#thumbbar').animate({
scrollTop: offsetthumb.top - heightbar / 2 - offsetbar - 20
});
그냥 팁.Firefox에서만 작동합니다.
모든 상황을 처리할 수 있는 해결책을 찾으려고 노력한 후(스크롤 애니메이션 옵션, 스크롤이 뷰에 들어오면 객체 주변에 패딩 옵션, iframe과 같은 모호한 상황에서도 작동), 결국 저는 이것에 대한 저만의 해결책을 작성하게 되었습니다.다른 많은 솔루션이 실패했을 때 효과가 있는 것처럼 보이기 때문에 공유하려고 생각했습니다.
function scrollIntoViewIfNeeded($target, options) {
var options = options ? options : {},
$win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
$container = options.$container ? options.$container : $win,
padding = options.padding ? options.padding : 20,
elemTop = $target.offset().top,
elemHeight = $target.outerHeight(),
containerTop = $container.scrollTop(),
//Everything past this point is used only to get the container's visible height, which is needed to do this accurately
containerHeight = $container.outerHeight(),
winTop = $win.scrollTop(),
winBot = winTop + $win.height(),
containerVisibleTop = containerTop < winTop ? winTop : containerTop,
containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
containerVisibleHeight = containerVisibleBottom - containerVisibleTop;
if (elemTop < containerTop) {
//scroll up
if (options.instant) {
$container.scrollTop(elemTop - padding);
} else {
$container.animate({scrollTop: elemTop - padding}, options.animationOptions);
}
} else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
//scroll down
if (options.instant) {
$container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
} else {
$container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
}
}
}
$target필요한 경우 보기로 스크롤할 개체를 포함하는 jQuery 개체입니다.
options(선택사항) 개체에 전달된 다음 옵션을 포함할 수 있습니다.
options.$container$target의 포함 요소(즉, 스크롤 막대가 있는 돔의 요소)를 가리키는 jQuery 개체입니다.$target 요소를 포함하고 iframe 창을 선택할 수 있을 정도로 스마트한 창으로 기본 설정됩니다.속성 이름에 $를 포함해야 합니다.
options.padding개체를 보기로 스크롤할 때 개체 위 또는 아래에 추가할 픽셀 단위 패딩입니다.이렇게 하면 창 가장자리에 맞지 않습니다.기본값은 20입니다.
options.instanttrue로 설정하면 jQuery 애니메이션이 사용되지 않고 스크롤이 즉시 올바른 위치로 팝업됩니다.기본값은 false입니다.
options.animationOptionsjQuery 애니메이션 함수에 전달할 jQuery 옵션(http://api.jquery.com/animate/) 참조).이를 통해 애니메이션 기간을 변경하거나 스크롤이 완료되면 콜백 기능을 실행할 수 있습니다.이것은 다음 경우에만 작동합니다.options.instantfalse로 설정됩니다.인스턴트 애니메이션이 필요하지만 콜백이 있는 경우 설정options.animationOptions.duration = 0사용하는 대신에options.instant = true.
끝 또는 아래로 스크롤할 수 있는 간단한 2단계.
1단계: 스크롤 가능한(대화) 디브의 전체 높이를 가져옵니다.
2단계: 1단계에서 얻은 값을 사용하여 스크롤 가능한(대화) div에 scrollTop을 적용합니다.
var fullHeight = $('#conversation')[0].scrollHeight;
$('#conversation').scrollTop(fullHeight);
위의 단계는 대화 div의 모든 추가에 적용되어야 합니다.
언급URL : https://stackoverflow.com/questions/4884839/how-do-i-get-an-element-to-scroll-into-view-using-jquery
'programing' 카테고리의 다른 글
| 용기를 멈추지 않고 분리하는 올바른 방법 (0) | 2023.08.26 |
|---|---|
| 각 루프에서 프로그램 실행 (0) | 2023.08.26 |
| 두 번째로 큰 값을 찾는 가장 간단한 SQL 쿼리는 무엇입니까? (0) | 2023.08.26 |
| "could not find driver"를 대규모로 해결하는 방법은? (0) | 2023.08.26 |
| asp.net core 1.0에서 Excel 파일 읽기 (0) | 2023.08.26 |