我正在开发一个元素,一旦您滚动过去,该元素就会粘在页面顶部。为了防止其下方的内容向上移动,我获取将要粘性的元素的父元素的当前高度,并将其添加为内联样式,纯粹是为了用户体验,这样用户就不会因跳跃的内容而迷失方向。
我想知道这是否对性能有额外的好处?更改元素位置的事实是否会导致页面回流,或者我是否通过在使子元素粘性之前向元素父级应用固定高度来阻止页面回流?
最佳答案
Does the mere fact of changing element's position cause page reflow
是的,请参阅What is DOM reflow? 。即使您作为用户可能看不到差异,网站也已重新绘制。
I am wondering if this has added benefit for performance?
重绘/重排通常很快,特别是当您只更改布局的一小部分时。但对性能影响更大的是跟踪滚动的方式。从历史上看,这主要是通过使用 addEventListener('scroll', /* ... */)
来完成的。 。然而,有一种更好、更高效的方法可以使用IntersectionObserver
API来做同样的事情。 。它有reasonable browser support并且有一个 polyfill .
关于html - 当元素从相对定位到固定但腾出的空间保持固定高度时,是否会发生页面回流,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51437070/