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

전체 페이지를 이동시키는 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'});

---

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

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

$("yourTargetLiSelector").scrollintoview();

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

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

---

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);
}
});

---

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

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

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

---

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

---

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);
    }
}

참고URL : https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move