Javascript 在chrome中的嵌套滚动中更改数据时防止页面滚动
我在一个带有“overflow:scroll”的页面中有一个固定大小的元素，内容经常更改。 我希望该元素内部发生的更改会影响该元素的滚动，但不会影响页面滚动 但当该元素位于页面顶部时，页面本身开始滚动。我怎样才能防止这种情况 为了重现这种行为（我在chrome中遇到了这个问题，但Firefox可以正常工作）：Javascript 在chrome中的嵌套滚动中更改数据时防止页面滚动,javascript,html,css,google-chrome,Javascript,Html,Css,Google Chrome,我在一个带有“overflow:scroll”的页面中有一个固定大小的元素，内容经常更改。 我希望该元素内部发生的更改会影响该元素的滚动，但不会影响页面滚动 但当该元素位于页面顶部时，页面本身开始滚动。我怎样才能防止这种情况 为了重现这种行为（我在chrome中遇到了这个问题，但Firefox可以正常工作）： 打开 开始将页面滚动到灰色元素的中心 稍等片刻，页面滚动将向上移动 代码示例： <body> <div style="overflow-y: scroll;hei
<body>
<div style="overflow-y: scroll;height: 300px">
Content that changes often
</div>
Content that should not move even the upper block is changed
</body>
经常变化的内容
即使更改了上部块也不应移动的内容
setInterval（函数（）{
var s=$（window.scrollTop（）；
$（'.scrollable'）.children（）.first（）.remove（）；
$（'.scrollable'）.append（''+（Date.now（））+''）；
$（窗口）。滚动顶部；
}, 1000);
;
.demo{
字体大小：24px；
}
.可滚动{
高度：300px；
溢出y：滚动；
背景：#eee；
}
字符串
字符串
字符串
字符串
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
字符串
之所以会发生这种情况，是因为从DOM中删除了元素，然后添加了新的元素，以便在一秒钟内更改元素的高度，页面就会滚动
您应该替换该元素，而不是将其移除
例如，从逻辑上讲，这并不是您想要的：
setInterval(function() {
$('.scrollable').children().first().replaceWith('<div>'+(Date.now())+'</div>');
}, 1000);
setInterval（函数（）{
$（'.scrollable'）.children（）.first（）.replaceWith（''+（Date.now（））+''）；
}, 1000);
将只更改元素而不更改高度或窗口。offset我最后添加了一个宽度为1px的空div。chrome似乎从顶部找到第一个元素，并相对于该元素移动滚动条。但我的解决方案非常粗糙，我在任何规范中都找不到这种行为的描述
<body>
<div style="height: 300px; opacity: 0; width: 1px; float: left;">
</div>
<div style="overflow-y: scroll;height: 300px">
Content that changes often
</div>
Content that should not move even the upper block is changed
</body>
经常变化的内容
即使更改了上部块也不应移动的内容
但是为什么更改元素的内容会使页面滚动，因为该元素具有固定的高度？（注意，这只发生在chrome上）是的，在这个演示中，我可以重用现有的DOM元素。但在真正的应用程序中，我不能，因为动画