我们有丰富的页面，其中有一个包含动态内容的小块。直到最近一切都运转良好。
现在，Chrome 浏览器以某种方式“捕获”页面上的一个 div 并向下滚动整个内容。用语言很难解释，但演示起来却容易得多。
这是测试页。只需在 Chrome 中打开它，然后向下滚动一点，这样蓝色框之一就会位于视口的最顶部边框上。当蓝色框停留在同一位置时，您将看到所有内容（数字 1、2、3..）都在自行滚动。
在这个简单的示例中，它看起来可能符合逻辑，但请考虑动态块只是页面上的许多块之一，并且没有理由滚动整个内容，因为块内部发生了某些变化。
<html>
<body>
<div id="x" style="border:solid 1px red;width:200;height:200">
</div>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
<script>
setInterval(function () {
var e = document.createElement('div');
e.setAttribute("style", "border:solid 2px blue;width:100px;height:20px");
var x = document.getElementById('x');
x.insertBefore(e, x.childNodes.length?x.childNodes[0]:null);
}, 1000);
</script>
</body>
</html>
我们本周刚刚发现 Chrome 的这种奇怪行为。该代码在过去 6 个月内运行良好，因此我认为这是 Chrome 制作的新东西。所有其他浏览器都工作正常。
==更新==
Using Chrome（我有最新的 v.56.0.2924.87（64 位））http://www.thefreedictionary.com/ http://www.thefreedictionary.com/并向下滚动，直到“实时搜索”（带有移动文字的框）出现在浏览器的最顶部。您将体验到整个页面开始移动，而不是正常行为。
这可能是由于 chrome 56 的滚动锚定功能而发生的，https://developers.google.com/web/updates/2016/04/scroll-anchoring https://developers.google.com/web/updates/2016/04/scroll-anchoring, https://www.chromestatus.com/feature/5700102471548928 https://www.chromestatus.com/feature/5700102471548928
解决此问题的解决方法是设置overflow-anchor: none;在父元素上。供您参考网站
#dvLiveSearch{
overflow-anchor: none;
}
这将修复 chrome 上的奇怪行为。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
