Chrome 121更新后网站滚动条样式异常，如何修复？

以下是几个可行的修复方法，按可靠性排序：

• 自定义滚动条样式（推荐）
  直接通过CSS伪元素强制定义滚动条的圆角及外观，不受浏览器默认样式更新影响：

/* 全局滚动条基础设置 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 5px;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

/* 滑块 hover 状态 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

如果需要兼容Firefox，可额外添加：

* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

• 重置浏览器默认样式冲突
  Chrome 121调整了滚动条的默认UA样式，部分网站可能被新规则覆盖，可通过以下代码修正：

::-webkit-scrollbar-corner {
  background: transparent;
}

同时检查页面中是否有overflow属性的异常设置，确保元素滚动行为符合预期。

• 针对性修复特定元素
  若仅部分页面或元素出现问题，直接定位对应元素，为其单独设置滚动条样式即可，例如针对.content容器：

.content::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

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