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

Posted

技术标签:

【中文标题】在页面内容更改时停止自动滚动【英文标题】: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>

   

【问题讨论】:

【参考方案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;

【讨论】:

以上是关于在页面内容更改时停止自动滚动的主要内容,如果未能解决你的问题,请参考以下文章

从上到下滚动时如何自动停止对项目的列表视图取消选择?

一个UIScrollview,自动滚动并在每个页面停止至少2秒

如何停止正文内容显示在页脚内容及下方

javascript 在更改页面之前自动滚动到页面顶部

UIScrollView 不使用自动布局滚动(内容视图框架大小以编程方式更改)

自动滚动时 UIScrollView 触摸不起作用