CSS选择器属性溢出值覆盖不见了，现在怎么办？

问：

CSS 属性是一个屏幕阅读器可访问的解决方案，用于模拟非常流行的 iOS 滚动条，这些滚动条覆盖可滚动元素并在 或 上瞬时可见。现在，这已被 w3c 别名化，结果是始终存在的轨道，在许多场景中创建不太理想的平方边缘。那里有像这样的包。但是这些解决方案在内容中注入了许多嵌套，从屏幕阅读器的可访问性角度来看，这并不是很好，尤其是对于.我不是在讨论视觉可访问性 （4：5：1），也不是要求始终在桌面 Web 浏览器内容上显示滚动条。我指的是从用户体验的角度来看，内容是如何表示的普遍技术限制。overflow: overlay:hover:focusoverflow: auto<div><table>

下面是一个自定义滚动条的示例，它与 CSS 的当前技术限制相匹配

在上图中，容器有一个 ，但轨道会产生视觉压力。border-radius

我创建了以下 SASS mixin：

@mixin scroll-bars() {
  overflow: auto;

  &::-webkit-scrollbar {
    background-color: transparent;
    height: $space-m;
    width: $space-m;
  }

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

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

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: 5px solid transparent;
    border-radius: 24px;
    box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    background-color: transparent;
  }

  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  // Firefox
  scrollbar-color: rgba(105, 113, 127, 0.7) transparent;
  scrollbar-width: 16px;
}

以上是 Safari、Chromium 和 Opera 的诀窍：

但是，Firefox 呈现如下：

如果这里有人一直在研究一个可扩展的解决方案，我想了解一下你的解决方案可能是什么。至于Firefox，我不确定为什么渲染为不透明的白色轨道。transparent