在页面内容更改时停止自动滚动答案

【问题标题】：Stop automatic scrolling on page content change在页面内容更改时停止自动滚动
【发布时间】：2017-08-14 23:16:09
【问题描述】：

我有一个页面，它在滚动事件中向自身添加和删除一些内容。

现在使用 Chrome 时（IE11 似乎没有这种行为），每当向页面添加和删除内容时，都会生成滚动事件（我猜是为了保持客户端视图在页面更改时保持一致）。

我不想要这个。内容变化产生的滚动事件会触发更多的内容变化，进而触发更多的滚动事件。

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

这是一些简单的示例代码。单击“单击”按钮将重新调整彩色差异并使页面自行滚动（在 Chrome 中，而不是 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>

【问题讨论】：

标签： javascript html google-chrome cross-browser

【解决方案1】：

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

在浏览器中禁用：转到chrome://flags/#enable-scroll-anchoring 并将“滚动锚定”设置为“禁用”。

通过 CSS 禁用：

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

【讨论】：

有用说明：此 CSS 属性必须应用于可滚动元素的子元素，以防止不必要的滚动
overflow-anchor 属性仅适用于 Blink 和 Gecko，但幸运的是只有 Blink 和 Gecko 具有这种滚动行为
非常感谢...给任何偶然发现此问题的人的便条，试图为烦人的 openHAB 1.8.3 Web UI 找到解决方案...这有效...只需解压缩 jar，然后添加*{ 溢出... 到 openhab.css 文件。 DOM 更新不再有烦人的跳转 :)

【解决方案2】：

我认为您不能禁用此行为，但您可以解决它。因为 Chrome 会在您调用 removeChild 时同步执行 scroll 事件，所以您可以通过在 removeChild 之前将全局布尔值设置为 true 并在之后直接将其设置回 false 来检测这些类型的滚动事件。

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.
}

你的滚动处理程序看起来像：

function onScroll() {
    if (isRemovingStuff)
        return;

    // Do cool stuff
}

【讨论】：

这似乎不起作用，该事件似乎在更改页面内容的功能完成后触发

【解决方案3】：

如果您使用的是 bootrap 4/5，这是一个解决方案

* {
    overflow-anchor: none !important;
    scroll-snap-stop: normal !important;
    overscroll-behavior: unset !important;
    scroll-behavior: unset !important;
}

.container, header, footer, .container-fluid, body, div, span, section {
    overflow-anchor: none !important;
    scroll-snap-stop: normal !important;
    overscroll-behavior: unset !important;
    scroll-behavior: unset !important;
}

【讨论】：