gpt4 book ai didi

javascript - Chrome 浏览器自动向下滚动内容(当没有人要求时)

转载 作者:可可西里 更新时间:2023-11-01 02:57:50 26 4
gpt4 key购买 nike

我们有丰富的页面,其中有一个包含动态内容的小块。直到最近,一切都运行良好。

现在 Chrome 浏览器以某种方式“捕获”页面上的一个 div 并向下滚动整个内容。这很难用语言解释,但更容易证明。

这是测试页。只需在 Chrome 中打开它,然后向下滚动一点,这样蓝色框之一就会位于视口(viewport)的最顶部边框上。当蓝色框停留在同一位置时,您会看到所有内容(数字 1、2、3..)都在自行滚动。

在这个简单的示例中,它可能看起来合乎逻辑,但考虑到动态 block 只是页面上的许多 block 之一,并且没有理由滚动整个内容,因为 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 制作的新东西。所有其他浏览器都可以正常工作。

== 更新 ==

使用 Chrome(我有最新的 v. 56.0.2924.87(64 位))到 http://www.thefreedictionary.com/并向下滚动,直到“实时搜索”(带有移动词的框)出现在浏览器的最顶部。您会体验到整个页面开始移动,而不是正常行为。

最佳答案

这可能是因为 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 上的奇怪行为。

关于javascript - Chrome 浏览器自动向下滚动内容(当没有人要求时),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42308209/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com