html - 当元素从相对定位到固定但腾出的空间保持固定高度时,是否会发生页面回流

标签 html css dom

我正在开发一个元素,一旦您滚动过去,该元素就会粘在页面顶部。为了防止其下方的内容向上移动,我获取将要粘性的元素的父元素的当前高度,并将其添加为内联样式,纯粹是为了用户体验,这样用户就不会因跳跃的内容而迷失方向。

我想知道这是否对性能有额外的好处?更改元素位置的事实是否会导致页面回流,或者我是否通过在使子元素粘性之前向元素父级应用固定高度来阻止页面回流?

最佳答案

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/

相关文章:

html - 显示带有口号而不是文本的图像并且仍然具有正确的 HTML 结构的正确方法是什么?

javascript - 在js之前加载css文件

javascript - 如果数组不包含字符串

html - 如何在悬停过渡期间使文本平移/增加宽度

html - 避免响应页面的重复内容

html - 为什么html,body {height 100%}同时影响宽高,而width 100%只影响宽度?

javascript - 在 2 个 div 之间设置动画

javascript - 将 DOM 元素分配给对象字面量成员

javascript - Jquery 生成列表元素时点击奇怪的行为

javascript - 使用 javascript 查找文本中 HTML 标签的位置,最好不使用正则表达式?