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

p8ekf7hl 于 2023-07-31 发布在 Go

关注(0)|答案(5)|浏览(173)

我有一个页面，它在滚动事件中添加和删除一些内容。
现在，当使用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>

google-chrome

来源：https://stackoverflow.com/questions/42958463/stop-automatic-scrolling-on-page-content-change

5条答案

按热度按时间

3zwjbxry1#

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

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

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

字符串

赞(0）回复(0）举报 2023-07-31

o2g1uqev2#

我不认为你可以禁用这种行为，但你可以解决它。由于Chrome在调用removeChild时同步执行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.
}

字符串
你的scroll handler看起来像这样：

function onScroll() {
    if (isRemovingStuff)
        return;

    // Do cool stuff
}

型

赞(0）回复(0）举报 2023-07-31

li9yvcax3#

如果您使用的是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;
}

字符串

赞(0）回复(0）举报 2023-07-31

ugmeyewa4#

chrome自动滚动：启用/禁用/windows /ubuntu
x1c 0d1x的数据

赞(0）回复(0）举报 2023-07-31

5t7ly7z55#

* {
  overflow-anchor: none !important;
}

字符串
overflow-anchor CSS属性提供了一种退出浏览器滚动锚定行为的方法，该行为调整滚动位置以最小化内容移动。
默认情况下，滚动锚定行为在任何支持它的浏览器中都处于启用状态。因此，通常只有在文档或文档的一部分中遇到滚动锚定问题并需要关闭该行为时，才需要更改此属性的值。
从https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

赞(0）回复(0）举报 2023-07-31

我来回答

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

5条答案

相关问题

热门标签

最新问答