滚动锚定（Scroll Anchoring）- 让视口内容不再因视口上方 DOM 元素的高度变化而产生跳动...

最新推荐文章于 2025-01-10 10:32:50 发布

weixin_33711647

最新推荐文章于 2025-01-10 10:32:50 发布

阅读量2.8k

点赞数

文章标签：前端 ViewUI

滚动锚定是Chrome 56引入的一种优化，旨在防止页面内容因上方元素高度变化而频繁跳出视口，提供更好的用户体验。当页面上方内容加载导致高度增加时，浏览器自动向下滚动相应距离，保持视口内容不变。该特性可通过CSS属性`overflow-anchor: none`关闭，适用于图片加载、iframe插入等场景，确保阅读和浏览的连续性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不知道你有没有经历过这样的场景：当你打开一张“多图杀猫”的页面后，正一张图一张图边滚边看，在你刚准备定睛看某一张图的时候，这张图突然被它上面的内容挤到了视口下方，然后你赶紧把滚动条往下拉，试图追赶这张没看完的图，当你刚刚追上的时候，这张图又一次被挤到了你看不见的地方。

发生这种情况的原因是因为在很多场景下（比如论坛里），你没法事先知道一张图的高度，所以你没法事先给这张图占位，在网速不理想的情况下，可能就会发生我上面描述的这种因页面靠上的图片比靠下的图片晚加载出来而导致用户当前浏览的内容被频繁挤出视口的情况。

我通过在定时器回调里向页面上方插入图片来模拟一下刚才描述的这种情况：

<style>
  img {
    
    display: block;
    margin: 0 auto;
  }
</style>
<img src="https://aecpm.alicdn.com/tfscom/TB1.52aPFXXXXa0XXXXXXXXXXXX.jpg">
<img src="https://aecpm.alicdn.com/tfscom/TB1_utRPVXXXXapXVXXXXXXXXXX.png">
<img src="https://static.dingtalk.com/media/lAHOuOFd_czSzQEn_295_210.gif">
<img src="https://aecpm.alicdn.com/tfscom/TB1f1xwQpXXXXXBXVXXXXXXXXXX.jpg">
<img src="https://gtms03.alicdn.com/tps/i3/TB1eSxvJVXXXXaKXFXXYoA

最低0.47元/天解锁文章