전체 페이지를 이동시키는 ScrollIntoView ()

ScrollIntoView ()를 사용하여 목록에서 강조 표시된 항목을보기로 스크롤합니다. 아래로 스크롤하면 ScrollIntoView (false)가 완벽하게 작동합니다. 그러나 위로 스크롤하면 ScrollIntoView (true)로 인해 전체 페이지가 의도 한대로 약간 이동합니다. ScrollIntoView (true)를 사용할 때 전체 페이지 이동을 피하는 방법이 있습니까?

내 페이지의 구조는 다음과 같습니다.

#listOfDivs {
  position:fixed;
  top:100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

<div="container">
    <div="content"> 
         <div id="listOfDivs"> 
             <div id="item1"> </div>
             <div id="item2"> </div>
             <div id="itemn"> </div>
         </div>
    </div>
</div>

listOfDivs는 ajax 호출에서 제공됩니다. 모바일 사파리 사용.

미리 도와 주셔서 감사합니다!

scrollTop대신 사용할 수 있습니다 scrollIntoView().

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

jsFiddle : http://jsfiddle.net/LEqjm/

스크롤하려는 스크롤 가능한 요소가 두 개 이상 있는 경우 중간 요소의에 scrollTop따라 각 offsetTop요소를 개별적 으로 변경해야합니다 . 이렇게하면 문제가 발생하지 않도록 세밀한 제어가 가능합니다.

편집 : offsetTop은 반드시 부모 요소와 관련이있는 것은 아니며 첫 번째 위치에있는 조상과 관련이 있습니다. 부모 요소의 위치가 지정되지 않은 경우 (상대, 절대 또는 고정) 두 번째 줄을 다음과 같이 변경해야 할 수 있습니다.

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;

다음과 같이 수정했습니다.

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

참조 : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

var el = document.querySelector("yourElement");
window.scroll({top: el.offsetTop, behavior: 'smooth'});

나도이 문제가 있었고, 그것을 해결하기 위해 많은 시간을 보냈다. 내 결심이 여전히 일부 사람들에게 도움이되기를 바랍니다.

내 수정 사항은 다음과 같습니다.

• 크롬의 경우 : 변경 .scrollIntoView()에.scrollIntoView({block: 'nearest'}) (@jfrohn에게 감사)로 .
• Firefox의 경우 : overflow: -moz-hidden-unscrollable;이동하는 컨테이너 요소에 적용 하십시오.
• 다른 브라우저에서는 테스트되지 않았습니다.

scrollIntoViewIfNeeded()...로 놀아 보세요. 브라우저에서 지원하는지 확인하세요.

ScrollIntoView- http : //jsfiddle.net/LEqjm/258/의 부적절한 동작을 표시하는 방법을 추가했습니다. [댓글이어야하지만 평판이 충분하지 않습니다.]

$("ul").click(function() {
    var target = document.getElementById("target");
if ($('#scrollTop').attr('checked')) {
    target.parentNode.scrollTop = target.offsetTop;    
} else {
        target.scrollIntoView(!0);
}
});

jQuery 플러그인 scrollintoview()은 유용성을 높입니다.

기본 DOM 구현 대신 움직임을 애니메이션하고 원치 않는 효과가없는 플러그인을 사용할 수 있습니다. 기본값으로 사용하는 가장 간단한 방법은 다음과 같습니다.

$("yourTargetLiSelector").scrollintoview();

어쨌든 모든 세부 사항을 읽을 수있는 이 블로그 게시물로 이동하여 결국 플러그인의 GitHub 소스 코드 를 볼 수 있습니다.

이 플러그인은 가장 가까운 스크롤 가능한 상위 요소를 자동으로 검색하고 선택한 요소가 보이는 뷰 포트 안에 있도록 스크롤합니다. 요소가 이미 뷰포트에 있다면 당연히 아무것도하지 않습니다.

Brilliant의 아이디어를 사용하여 요소가 현재 표시되지 않는 경우에만 (수직) 스크롤하는 솔루션이 있습니다. 아이디어는 뷰포트의 경계 상자와 브라우저 창 좌표 공간에 표시 할 요소를 가져 오는 것입니다. 표시되는지 확인하고 표시되지 않는 경우 필요한 거리만큼 스크롤하여 요소가 뷰포트의 상단 또는 하단에 표시되도록합니다.

    function ensure_visible(element_id)
    {
        // adjust these two to match your HTML hierarchy
        var element_to_show  = document.getElementById(element_id);
        var scrolling_parent = element_to_show.parentElement;

        var top = parseInt(scrolling_parent.getBoundingClientRect().top);
        var bot = parseInt(scrolling_parent.getBoundingClientRect().bottom);

        var now_top = parseInt(element_to_show.getBoundingClientRect().top);
        var now_bot = parseInt(element_to_show.getBoundingClientRect().bottom);

        // console.log("Element: "+now_top+";"+(now_bot)+" Viewport:"+top+";"+(bot) );

        var scroll_by = 0;
        if(now_top < top)
            scroll_by = -(top - now_top);
        else if(now_bot > bot)
            scroll_by = now_bot - bot;
        if(scroll_by != 0)
        {
            scrolling_parent.scrollTop += scroll_by; // tr.offsetTop;
        }
    }

@Jesco게시물에 더 많은 정보를 추가합니다 .

• Element.scrollIntoViewIfNeeded() non-standard WebKit methodChrome, Opera, Safari 브라우저 용.
  요소가 이미 브라우저 창의 보이는 영역 내에 있으면 스크롤이 발생하지 않습니다 .
• Element.scrollIntoView() 메서드는 호출 된 요소를 브라우저 창의 표시 영역으로 스크롤합니다.

mozilla.org scrollIntoView()링크 에서 아래 코드를 시도하십시오 . ^{브라우저 를 식별하기위한 게시}

var xpath = '//*[@id="Notes"]';
ScrollToElement(xpath);

function ScrollToElement(xpath) {
    var ele = $x(xpath)[0];
    console.log( ele );

    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    if (isChrome) { // Chrome
        ele.scrollIntoViewIfNeeded();
    } else {
        var inlineCenter = { behavior: 'smooth', block: 'center', inline: 'start' };
        ele.scrollIntoView(inlineCenter);
    }
}

내 맥락에서 그는 고정 도구 모음을 화면 밖으로 밀거나 앱솔루트 버튼 옆에 입력합니다.

가장 가까운 풀을 사용합니다.

const element = this.element.nativeElement;
const table = element.querySelector('.table-container');
table.scrollIntoView({
  behavior: 'smooth', block: 'nearest'
});

나는 같은 문제가 있었는데 페이지 transform:translateY에 배치 한 CSS 를 제거하여 해결했습니다 footer.