Question

我有一个页面，可以在滚动事件中添加和删除一些内容。

现在使用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>

Answer 1

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

在浏览器中禁用：转到chrome://flags/#enable-scroll-anchoring并设置＆＃34;滚动锚定＆＃34;到＆＃34;禁用＆＃34;。

通过CSS禁用：

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

Answer 2

我认为您无法禁用此行为，但您可以解决此问题。由于Chrome在您调用scroll时同步执行removeChild事件，因此您可以通过在true之前将全局布尔设置为removeChild并设置它来检测这些类型的滚动事件直接回到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
}

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

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

3 个答案: