React滚动组件仅笔记本显示器卡顿、列表项消失问题求助

问题背景 #

我有一个滚动列表组件，结构为：

• 外层是设置了overflow-y: scroll的div容器
• 内部是display: flex; flex-direction: column的ul列表
• 列表项仅设置position: relative

当前出现以下异常：

• 滚动时列表项闪烁、卡顿，部分项不显示
• 滚动后卡顿持续存在，刷新后滚动仍会复现
• 特殊现象：MacBook Pro连接外接显示器时，将浏览器窗口拖到外接显示器后问题消失，拖回笔记本显示器立刻重现
• 近期仅替换了滚动容器组件并调整CSS，旧代码无此问题；Chrome DevTools选中列表项时，蓝色选区也会卡顿

相关代码：

.listContainer {
  height: 100%;
  padding-top: 8px;
  padding-bottom: 16px;
  padding-left: 8px;
  padding-right: 8px;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */

  @include query(mobile) {
    margin-top: 128px;
  }
}
.listContainer::-webkit-scrollbar {
  /* WebKit */
  width: 0;
  height: 0;
}
.list {
  @include reset-list;
  display: flex;
  flex-direction: column;
  row-gap: $grid-2;
  width: 100%;
}

.item {
  position: relative;
}

<div className={s.listContainer}>
  <ul className={s.list}>
      {filteredProjects
        .map((project, index) => (
          <li
            className={s.item}
            key={project.id}
          >
       {...code with buttons, text, image, etc.}
          </li>
  </ul>
</div>

解决思路 #

这种跨显示器差异的问题，大概率和浏览器GPU渲染策略、合成层处理有关，结合CSS变更的背景，可按以下步骤排查：

1. 强制触发硬件加速，优化合成层渲染 #

给滚动容器和列表项添加GPU加速相关属性，强制浏览器将元素放入独立合成层，减少重绘重排：

.listContainer {
  /* 保留原有样式 */
  will-change: scroll-position;
  transform: translateZ(0);
}

.item {
  position: relative;
  /* 添加以下属性 */
  will-change: transform;
  transform: translateZ(0);
}

• will-change提前告知浏览器元素即将发生的变化，让浏览器提前做好渲染优化
• transform: translateZ(0)是触发硬件加速的常用技巧，强制元素进入GPU合成层，避免滚动时的重绘卡顿

2. 排查flex布局的性能冲突 #

当前ul使用flex垂直布局，若列表项数量较多，flex的布局计算可能比传统block布局更消耗性能。可临时替换为block布局验证：

.list {
  @include reset-list;
  /* 替换flex为block */
  display: block;
  width: 100%;
}
.item {
  position: relative;
  margin-bottom: $grid-2; /* 替代row-gap */
}

如果替换后问题消失，说明flex布局与滚动容器的组合触发了渲染bug，可考虑保留block布局，或调整flex相关属性（如移除不必要的flex设置）

3. 修正滚动容器的高度设置 #

容器使用height: 100%可能导致父元素高度计算异常，引发滚动时反复重算尺寸。尝试设置固定高度或明确的计算值：

.listContainer {
  /* 替换height:100%为具体计算值 */
  height: calc(100vh - 60px);
  /* 保留其他原有样式 */
}

4. 调整滚动条隐藏方式 #

当前隐藏滚动条的方式（设置宽度为0）在特定浏览器+显示器组合下可能触发渲染bug，临时恢复滚动条验证：

/* 临时注释以下代码 */
/* .listContainer::-webkit-scrollbar { width: 0; height: 0; } */
/* scrollbar-width: none; */

若恢复后问题消失，可改用遮罩层隐藏滚动条（如用一个绝对定位的div盖住滚动条区域），避免直接修改滚动条尺寸。

5. 排查列表项内部元素的渲染问题 #

列表项内的按钮、图片等元素若有复杂CSS（过渡、动画、滤镜），可能在滚动时触发频繁重绘。可临时简化列表项内容（仅保留纯文本），逐步排查是哪个子元素导致的问题。

内容的提问来源于stack exchange，提问作者cshdev