페이지 내용 변경시 자동 스크롤 중지

Question

스크롤 이벤트에서 일부 내용을 추가하고 제거하는 페이지가 있습니다.

Chrome을 사용할 때 (IE11에 이러한 동작이없는 것처럼 보임) 페이지에 콘텐츠가 추가되거나 제거 될 때마다 스크롤 이벤트가 생성됩니다 (페이지 변경시 클라이언트보기를 일관되게 유지하기 위해) .

나는 이것을 원하지 않는다. 콘텐츠 변경시 생성 된 스크롤 이벤트는 더 많은 콘텐츠 변경을 유발하고 차례로 더 많은 스크롤 이벤트를 발생시킵니다.

모든 브라우저에서 어떻게 작동합니까? 자동 스크롤이 일어나기를 원하지 않습니다. 사용자 스크롤링 만 등록하면됩니다.

다음은 간단한 예제 코드입니다. 난 당신이을 해제 할 수 있다고 생각하지 않습니다 버튼 컬러 차이점을 개편하고 그 자체로 페이지 스크롤을 할 것 "클릭"(크롬에서,하지 IE11) ...

function removeStuff(){ 
 
    var elem = document.getElementById("center"); 
 
    document.getElementById("container").removeChild(elem); 
 
    document.getElementById("container").appendChild(elem); 
 
}

#top { 
 
    background-color: green; 
 
    height:1500px; 
 

 
} 
 

 
#center { 
 
    background-color: blue; 
 
    height:1000px; 
 
} 
 

 
#bottom { 
 
    background-color: red; 
 
    height:1500px; 
 
}

<div id="container"> 
 
    <div id="top"></div> 
 
    <div id="center"></div> 
 
    <button id="button" onclick="removeStuff()">click</button> 
 
    <div id="bottom"></div> 
 
</div> 
 

 

Answer 1

을 클릭 행동을하지만 주위를 해결할 수는 있습니다. Chrome은 removeChild을 호출 할 때 scroll 이벤트를 동 기적으로 수행하므로 removeChild 직전에 글로벌 부울을 true으로 설정하고 그 직후에 false으로 다시 설정하여 이러한 유형의 스크롤 이벤트를 감지 할 수 있습니다.

function onScroll() { 
    if (isRemovingStuff) 
     return; 

    // Do cool stuff 
} 

Answer 2

이 스크롤 고정라고 최근에 추가 된 크롬 기능입니다 : 같은

var isRemovingStuff = false; function removeStuff(){ var elem = document.getElementById("center"); // Chrome does a scroll here, set isRemovingStuff to true // so our scroll handler can know to ignore it. isRemovingStuff = true; document.getElementById("container").removeChild(elem); isRemovingStuff = false; document.getElementById("container").appendChild(elem); // TODO: set the scrollTop back to what you want it to be. } 

그리고 당신의 스크롤 핸들러가 보일 것이다.

브라우저에서 사용 안 함 : chrome://flags/#enable-scroll-anchoring으로 이동하고 "Scroll anchoring"을 "Disabled"로 설정하십시오. CSS를 통해

비활성화 :

.some-element { 
    overflow-anchor: none; 
}