在页面内容更改时停止自动滚动
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秒