如何解决在 Safari 上,当 DOM 在可见视口之外更新时,视口中的内容会发生变化
在 Google Chrome 上将元素添加到用户视口上方的 DOM 时,视口中的内容不会移动,而在 Safari 上会移动(等于新元素的高度)。
在视口外进行更新后,Safari 上的内容怎么可能不会发生变化?
编辑 (2021-06-02):我发现这种行为称为滚动锚定,可以在 https://github.com/WICG/ScrollAnchoring 和 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
上找到更多详细信息在下面的演示视频中,一个项目被添加到列表的顶部(每 4 秒一次)。随着项目的添加(以蓝色突出显示),视口中的内容(使用可滚动区域模拟)向下移动,导致布局移动。
- 源代码:https://github.com/kevinfarrugia/poll-layout-instability
- 演示:https://kevinfarrugia.github.io/poll-layout-instability/
解决方法
最简单的解决方案可能是在对页面进行更改之前读取 window.scrollY
,然后在插入新元素后将其设置回该值
const y = window.scrollY
updatePage()
window.scrollY = y
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。