[javascript] jQuery를 사용하여 요소를 스크롤하여 볼 수 있습니까?

Program / 글쓴이

를 사용하여 격자 형식의 이미지가있는 HTML 문서가 있습니다 <ul><li><img.... 브라우저 창에는 세로 및 가로 스크롤이 있습니다.

질문 :
이미지를 클릭 할 때 <img>방금 클릭 한 이미지가있는 위치로 전체 문서를 스크롤하려면 top:20px; left:20px어떻게해야합니까?

JavaScript를 처음 접했을 때도 비슷한 게시물을 찾아 보았지만 이것이 어떻게 달성되는지 이해하고 싶습니다.

답변

작동 방식을 알고 싶으 니 단계별로 설명하겠습니다.

먼저 이미지의 클릭 핸들러로 함수를 바인딩하려고합니다.

$('#someImage').click(function () {
    // Code to do scrolling happens here
});

그러면 클릭 핸들러가 이미지에 적용됩니다 id="someImage". 당신이이 작업을 수행하려면 모든 이미지 교체 '#someImage'와 함께 'img'.

실제 스크롤 코드는 다음과 같습니다.

  1. 문서와 관련된 이미지 오프셋을 가져옵니다.

    var offset = $(this).offset(); // Contains .top and .left

  2. 20에서 빼기 top및 left:

    offset.left -= 20;
offset.top -= 20;

  3. 지금의 스크롤 상단과 스크롤 왼쪽 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();

답변

시행 착오 후에이 기능을 생각해 내고 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 });
}