jQuery를 사용하여 요소를 스크롤하여 볼 수 있습니까?
를 사용하여 격자 형식의 이미지가있는 HTML 문서가 있습니다 <ul><li><img.... 브라우저 창에는 세로 및 가로 스크롤이 있습니다.
질문 : 이미지를 클릭 할 때 <img>방금 클릭 한 이미지가있는 위치로 전체 문서를 스크롤하려면 top:20px; left:20px어떻게해야합니까?
JavaScript를 처음 접했을 때도 비슷한 게시물을 찾아 보았지만 이것이 어떻게 달성되는지 이해하고 싶습니다.
작동 방식을 알고 싶으 니 단계별로 설명하겠습니다.
먼저 이미지의 클릭 핸들러로 함수를 바인딩하려고합니다.
$('#someImage').click(function () {
// Code to do scrolling happens here
});
클릭 핸들러가 이미지에 적용됩니다 id="someImage". 당신이이 작업을 수행하려면 모든 이미지 교체 '#someImage'와 함께 'img'.
실제 스크롤 코드는 다음과 같습니다.
문서와 관련된 이미지 오프셋을 가져옵니다.
var offset = $(this).offset(); // Contains .top and .left20에서 빼기
top및left:offset.left -= 20; offset.top -= 20;지금의 스크롤 상단과 스크롤 왼쪽 CSS 속성 애니메이션
<body>과<html>:$('html, body').animate({ scrollTop: offset.top, scrollLeft: offset.left });
scrollIntoView모든 주요 브라우저에서 지원되는 DOM 메소드가 있는데 ,이 메소드 는 뷰포트의 상단 / 왼쪽에 (또는 가능한 한) 요소를 정렬합니다.
$("#myImage")[0].scrollIntoView();
지원되는 브라우저에서 다음 옵션을 제공 할 수 있습니다.
$("#myImage")[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
또는 모든 요소에 고유 한 ID hash가있는 location경우 뒤로 / 앞으로 단추 지원을 위해 객체 의 속성을 변경할 수 있습니다 .
$(document).delegate("img", function (e) {
if (e.target.id)
window.location.hash = e.target.id;
});
그 후 scrollTop/ scrollLeft속성을 -20으로 조정하십시오 .
document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;
내가 본 가장 간단한 솔루션
var offset = $("#target-element").offset();
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
}, 1000);
요소를 뷰로 직접 스크롤하는 방법이 있지만 요소와 상대적인 점으로 스크롤하려면 수동으로 수행해야합니다.
클릭 핸들러 내에서 문서를 기준으로 요소의 위치를 가져 와서 빼고 20사용하십시오 window.scrollTo.
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 플러그인을 살펴보십시오 . 여기 데모가 있습니다.
이 플러그인에는 기본 scrollIntoView가 제공 하는 것 이상의 다양한 옵션이 있습니다. 예를 들어, 스크롤을 부드럽게 설정 한 다음 스크롤이 완료 될 때의 콜백을 설정할 수 있습니다.
"scroll"태그가 지정된 모든 JQuery 플러그인을 살펴볼 수도 있습니다 .
내장 된 브라우저 기능을 멋지게 매핑하는 빠른 jQuery 플러그인은 다음과 같습니다.
$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); };
...
$('.my-elements').ensureVisible();
After trial and error I came up with this function, works with iframe too.
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 });
}
Just a tip. Works on firefox only
My UI has a vertical scrolling list of thumbs within a thumbbar The goal was to make the current thumb right in the center of the thumbbar. I started from the approved answer, but found that there were a few tweaks to truly center the current thumb. hope this helps someone else.
markup:
<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
});
Simple 2 steps for scrolling down to end or bottom.
Step1: get the full height of scrollable(conversation) div.
Step2: apply scrollTop on that scrollable(conversation) div using the value obtained in step1.
var fullHeight = $('#conversation')[0].scrollHeight;
$('#conversation').scrollTop(fullHeight);
Above steps must be applied for every append on the conversation div.
After trying to find a solution that handled every circumstance (options for animating the scroll, padding around the object once it scrolls into view, works even in obscure circumstances such as in an iframe), I finally ended up writing my own solution to this. Since it seems to work when many other solutions failed, I thought I'd share it:
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 is a jQuery object containing the object you wish to scroll into view if needed.
options (optional) can contain the following options passed in an object:
options.$container - a jQuery object pointing to the containing element of $target (in other words, the element in the dom with the scrollbars). Defaults to the window that contains the $target element and is smart enough to select an iframe window. Remember to include the $ in the property name.
options.padding - the padding in pixels to add above or below the object when it is scrolled into view. This way it is not right against the edge of the window. Defaults to 20.
options.instant - if set to true, jQuery animate will not be used and the scroll will instantly pop to the correct location. Defaults to false.
options.animationOptions - any jQuery options you wish to pass to the jQuery animate function (see http://api.jquery.com/animate/). With this, you can change the duration of the animation or have a callback function executed when the scrolling is complete. This only works if options.instant is set to false. If you need to have an instant animation but with a callback, set options.animationOptions.duration = 0 instead of using options.instant = true.
참고URL : https://stackoverflow.com/questions/4884839/how-do-i-get-an-element-to-scroll-into-view-using-jquery
'Programing' 카테고리의 다른 글
| 두 NSDate 사이의 일수 (0) | 2020.06.11 |
|---|---|
| 인덱스가있는 foreach (0) | 2020.06.10 |
| RMagick 설치 : MagickWand.h를 찾을 수 없습니다 (0) | 2020.06.10 |
| 이진 트리 다이어그램을 인쇄하는 방법? (0) | 2020.06.10 |
| 숨기기 및보기 암호 간을 전환하는 방법 (0) | 2020.06.10 |