Chrome浏览器会自动向下滚动内容(没有人要求时) [英] Chrome browser automatically scrolling down the content (when nobody asked it to)
问题描述
我们有一个丰富的页面，其中有一个带有动态内容的小块.直到最近一切都很好.
We have rich page where we have one little block with dynamic content. Everything worked just fine until recently.
现在，Chrome浏览器以某种方式捕获"了页面上的一个div，并向下滚动了整个内容.用语言很难解释，但是更容易证明.
Now Chrome browser somehow "capture" the one div on the page and scroll down the whole content. It's hard to explain in words, but much easier to demonstrate.
这是测试页.只需在Chrome中打开它，然后向下滚动一点，使其中一个蓝色框位于视口的最上方.当蓝色框位于同一位置时，您将看到所有内容(数字1,2,3 ..)都在自动滚动.
Here is test page. Just open it in Chrome, and scroll a little bit down so the one of the blue boxes will be on the very top border of viewport. You will see that all content (numbers 1,2,3..) is scrolling by itself when the blue box stays on same place.
在这个简单的示例中看起来很合乎逻辑，但是请考虑动态块只是页面上许多块中的一个，并且由于块中发生了某些变化，因此没有理由滚动整个内容.
It may looks logical in this simple example, but consider that the dynamic block is only one of many blocks on the page and there's no reason to scroll the whole content because something changing inside the block.
<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的新功能.所有其他浏览器都可以正常工作.
We just discovered this Chrome weird behavoir this week. The code worked fine for last 6 months, so I think it's something new that Chrome made. All other browsers works fine.
==更新==
使用 Chrome (我拥有最新的v.56.0.2924.87(64位))到 http://www.thefreedictionary.com/并向下滚动，直到实时搜索"(带有移动词的框)出现在浏览器的顶部.您会发现整个页面开始移动，而不是正常行为.
Using Chrome (I have latest v. 56.0.2924.87 (64-bit)) to http://www.thefreedictionary.com/ and scroll down until "Live searches" (box with moving words) appears on the very top of your browser. You will experience that instead of normal behavior, the whole page starts moving.
推荐答案
This could be happening because of the scroll anchoring feature of chrome 56, https://developers.google.com/web/updates/2016/04/scroll-anchoring, https://www.chromestatus.com/feature/5700102471548928
解决此问题的方法是在父元素上设置overflow-anchor: none;.供您参考的网站
Workaround to fix this issue is to set overflow-anchor: none; on parent element. For your reference website
#dvLiveSearch{
overflow-anchor: none;
}
这将修复chrome上的怪异行为.
This would fix the weird behavior on chrome.
这篇关于Chrome浏览器会自动向下滚动内容(没有人要求时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
