如何在不影响webkit resizer的情况下样式化webkit滚动条？

针对你遇到的滚动条resizer尺寸异常、出现意外边框的问题，可通过以下调整解决：

核心问题原因 #

当前代码仅设置了::-webkit-scrollbar和::-webkit-scrollbar-thumb的样式，未对滚动条轨道（::-webkit-scrollbar-track）和resizer进行显式样式重置，导致有滚动条时，浏览器默认的轨道/resizer样式与自定义样式冲突，引发布局异常。

解决方案 #

修改你的SCSS混合宏，补充轨道和resizer的样式重置：

@mixin scrollbar-styles {
  &::-webkit-scrollbar {
    background-color: transparent;
    border: none;
    width: 12px;
    height: 12px; // 同时设置高度，确保垂直/水平滚动条的resizer一致
  }

  &::-webkit-scrollbar-button {
    display: none;
  }

  // 重置滚动条轨道样式
  &::-webkit-scrollbar-track {
    background-color: transparent;
    border: none;
  }

  // 显式重置resizer样式，解决尺寸和边框问题
  &::-webkit-resizer {
    background-color: transparent;
    border: none;
    width: 12px;
    height: 12px;
  }

  &:hover {
    &::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 99px;
      background-clip: content-box;
      border: 3px solid transparent;
    }
    &.on-dark {
      &::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
  }
}

关键调整说明 #

1. 添加::-webkit-scrollbar-track样式：重置轨道为透明背景、无边框，避免默认轨道样式干扰resizer布局。
2. 显式设置::-webkit-resizer样式：虽然MDN标注该属性非标准，但目前WebKit内核浏览器（Chrome、Safari等）仍支持，通过设置与滚动条一致的尺寸、透明背景和无边框，可直接覆盖默认异常样式。
3. 补充::-webkit-scrollbar的height属性：确保水平滚动条的resizer尺寸也保持一致。

这样调整后，无论是否显示滚动条，resizer都会保持正确的尺寸和无状态，不会出现意外边框。

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