网站滚动条变动导致画面抖动
来源:本站原创
点击数: 次
发布时间:2026年05月09日
客户电脑某篇文章打开内容非常模糊,并且发生抖动
这种情况在前端开发中非常典型,被称为 “布局抖动” (Layout Thrashing)。
在 2K 分辨率下,由于渲染面积变大,某些基于百分比或视口单位(vh/vw)计算的组件触发了逻辑死循环。其底层逻辑通常是这样的:
触发临界点:页面某个元素(通常是图片或容器)的高度计算在 2K 分辨率下恰好处于一个“尴尬”的数值。
出现滚动条:元素高度稍微超过了视口,浏览器强制弹出垂直滚动条。
挤压宽度:关键点来了——滚动条本身占据约 15px-17px 的宽度。滚动条一出现,页面的可用宽度立刻减小。
重新计算:由于图片或容器可能是自适应的(比如
width: 100%),宽度减小导致高度也跟着缩放(保持比例)。滚动条消失:高度缩放后,页面总高度又回到了视口范围内,于是浏览器撤销了滚动条。
回到原点:滚动条消失,可用宽度变大,图片再次拉伸,高度再次超标……循环开始。
尝试在css里面强行固定滚动条
html {
overflow-y: scroll; /* 永远显示右侧滚动条占位符,不给它消失的机会 */
}之后文章无论多高都会显示滚动条,就不会出现该问题了。
