Mik*_*nov 9 javascript google-chrome
我们有丰富的页面,我们有一个带有动态内容的小块.直到最近,一切都很好.
现在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制作的新功能.所有其他浏览器工作正常.
==更新==
使用Chrome(我有最新版本56.0.2924.87(64位))到http://www.thefreedictionary.com/并向下滚动,直到"实时搜索"(带有移动文字的框)出现在浏览器的最顶部.您将体验到整个页面开始移动而不是正常行为.
azs*_*s06 16
由于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上的奇怪行为.
| 归档时间： |
|
| 查看次数： |
1937 次 |
| 最近记录： |