停止页面内容更改时的自动滚动 [英] Stop automatic scrolling on page content change

问题描述

现在，当使用Chrome浏览器（IE11似乎没有这种行为）时， ，无论何时添加内容并将其移除到页面上，都会生成滚动事件（我猜想为了保持客户端视图在页面更改上保持一致）。

我不想要这个。在内容更改时生成的滚动事件将触发更多的内容更改，从而触发更多滚动事件。

有关如何阻止所有浏览器出现此行为的任何建议？我不希望任何自动滚动发生。我只希望用户滚动进行注册。

以下是一些简单的示例代码。点击单击按钮将重新洗牌彩色差异，并使页面自己滚动（在Chrome中，而不是IE11）... ... $ /

  function removeStuff（）{var elem = document.getElementById（center）;的document.getElementById（ 容器）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 =buttononclick =removeStuff（）>点击< / button> < div id =bottom>< / div>< / div>  

这是一个最近添加的Chromium功能，称为滚动锚定。

禁用浏览器：转到 chrome：// flags /＃enable-scroll-anchoring 并将Scroll anchoring设置为Disabled。

通过CSS禁用：

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

I have a page which adds and removes some content to itself on a scroll event.

Now when using Chrome(IE11 doesn't seem to have this behaviour), whenever the content is added and removed to the page a scroll event is generated (I guess in order to keep the client view consistent on page changes).

I don't want this. The scroll event generated on the content change will trigger more content changes which will in turn trigger more scroll events.

Any advice on how I can stop this behaviour for all browsers? I don't want any automatic scrolling to happen. I only want user scrolling to be registered.

Here is some simple example code. Clicking the "click" button will reshuffle the colored diffs and make the page scroll by itself (in Chrome, not 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>

   

解决方案

This is a Chromium feature recently added, called scroll-anchoring.

Disable in the browser: go to chrome://flags/#enable-scroll-anchoring and set "Scroll anchoring" to "Disabled".

Disable via CSS:

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

这篇关于停止页面内容更改时的自动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！