你提到不想依赖-webkit前缀来调整滚动条，现在其实有标准的CSS属性可以实现基础的颜色和尺寸修改，Chrome等现代浏览器已经全面支持这些属性了，我来给你一步步说明：

核心标准属性说明 #

• scrollbar-width：控制滚动条的宽度/厚度，可选值包括：
  • auto：浏览器默认尺寸
  • thin：纤细的滚动条
  • none：隐藏滚动条但保留滚动功能
  • 具体长度值（比如8px）：自定义固定宽度
• scrollbar-color：设置滚动条的颜色组合，第一个值是**滚动滑块（thumb）的颜色，第二个值是滚动轨道（track）**的颜色

结合你的代码修改示例 #

你的代码里html设置了横向滚动、body为自动滚动，我们直接给这两个元素加上滚动条样式即可：

html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  /* 新增滚动条样式 */
  scrollbar-width: 8px; /* 自定义滚动条宽度 */
  scrollbar-color: #4a90e2 #f0f0f0; /* 滑块颜色为浅蓝，轨道颜色为浅灰 */
}

html {
  overflow-x: scroll;
  height: 100%;
}

body {
  overflow: auto;
}

.wrapper {
  max-width: 110px;
  margin: 0 auto;
  background: #3691b0;
  height: 1px;
}

补充说明 #

如果需要更精细的样式控制（比如滑块圆角、hover状态变化），目前标准属性还无法实现，但仅针对颜色和尺寸的需求，上面的方案完全够用，且不需要任何浏览器前缀。你之前查的内容可能比较陈旧，现在这类标准属性已经在主流浏览器中普及啦。

内容的提问来源于stack exchange，提问作者Estelle D.