设置 webkit 滚动条的样式而不影响 webkit 缩放器

Question

我很难在不影响我的缩放器的情况下设计滚动条。我设法根据规范设置滚动条的样式。问题在于缩放器会更改大小并出现意外的边框。当没有滚动条时，调整大小看起来是正确的。请参阅下面的图片。 在 Codepen 中查看。

我的

.scss

代码如下。

@mixin scrollbar-styles {
  &::-webkit-scrollbar {
    background-color: transparent;
    border: none;
    width: 12px;
  }

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

  &: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);
      }
    }
  }
}

有人知道如何解决这个问题吗？我尝试使用

::-webkit-resizer

进行样式设置，但它不起作用，并且 MDN 建议不要使用它。

谢谢大家。

Answer 1

棘手的部分是，实际上涉及两个伪元素，

::webkit-resizer

和

::webkit-scrollbar-corner

。

要摆脱奇怪的边框，您只需设置

::webkit-scrollbar-corner

的样式：

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