Question

我们有一个丰富的页面，我们有一个带有动态内容的小块。直到最近，一切工作都很顺利。

现在以某种方式使用Chrome浏览器＆＃34;捕获＆＃34;页面上的一个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制作的新功能。所有其他浏览器都可以正常工作。

==更新==

使用 Chrome （我最新的v.56.0.2924.87（64位））到http://www.thefreedictionary.com/并向下滚动，直到＆＃34;直播搜索＆＃34; （带有移动文字的框）出现在浏览器的最顶部。您将体验到整个页面开始移动而不是正常行为。

Answer 1

由于chrome 56的滚动锚定功能，https://developers.google.com/web/updates/2016/04/scroll-anchoring，https://www.chromestatus.com/feature/5700102471548928

，可能会发生这种情况

解决此问题的解决方法是在父元素上设置overflow-anchor: none;。供您参考的网站

#dvLiveSearch{
   overflow-anchor: none;
}

这将解决Chrome上的奇怪行为。

Chrome浏览器自动向下滚动内容（当没有人要求时）

1 个答案: