网站滚动条变动导致画面抖动

来源:本站原创 点击数: 发布时间:2026年05月09日

客户电脑某篇文章打开内容非常模糊,并且发生抖动

这种情况在前端开发中非常典型,被称为 “布局抖动” (Layout Thrashing)

在 2K 分辨率下,由于渲染面积变大,某些基于百分比或视口单位(vh/vw)计算的组件触发了逻辑死循环。其底层逻辑通常是这样的:

  1. 触发临界点:页面某个元素(通常是图片或容器)的高度计算在 2K 分辨率下恰好处于一个“尴尬”的数值。

  2. 出现滚动条:元素高度稍微超过了视口,浏览器强制弹出垂直滚动条。

  3. 挤压宽度关键点来了——滚动条本身占据约 15px-17px 的宽度。滚动条一出现,页面的可用宽度立刻减小。

  4. 重新计算:由于图片或容器可能是自适应的(比如 width: 100%),宽度减小导致高度也跟着缩放(保持比例)。

  5. 滚动条消失:高度缩放后,页面总高度又回到了视口范围内,于是浏览器撤销了滚动条。

  6. 回到原点:滚动条消失,可用宽度变大,图片再次拉伸,高度再次超标……循环开始。

尝试在css里面强行固定滚动条

html {
    overflow-y: scroll; /* 永远显示右侧滚动条占位符,不给它消失的机会 */
}

之后文章无论多高都会显示滚动条,就不会出现该问题了。