溢出时停止 -webkit-scrollbar-track 出现在其他内容之上：overlay

Question

我有一组样式可以使用 -webkit-scrollbar-track 为 Chromium/Webkit 创建一个细长的覆盖滚动条（FX 中的回退没有这个问题），比如：

#wrapper {
  height: 125px;
  display: flex;
}

.slim-scroll {
    flex: 1;
    overflow-y: overlay !important;
    padding-right: calc(8px * 1.5);
}

    .slim-scroll::-webkit-scrollbar-track
    {
    }
        .slim-scroll:hover::-webkit-scrollbar-track { 
            -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
            box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
            background: grey; 
        }

    .slim-scroll::-webkit-scrollbar
    {   
        height: 8px;
        width: 8px;
        background: none;
        -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
        box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
    }

    .slim-scroll::-webkit-scrollbar-thumb
    {
        background: black;
    }
        .slim-scroll:hover::-webkit-scrollbar-thumb { background: red; }

<div id="wrapper">
  <div class="slim-scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt risus eros, non fermentum quam lacinia eu. In nec nibh ipsum. Nunc sollicitudin lectus sed leo euismod, sed tincidunt nunc eleifend. Nunc sed nunc felis. Nunc dolor metus, luctus in aliquet sit amet, congue sed lacus. Cras pellentesque nisl quis quam vehicula, eget fermentum metus luctus. Vestibulum eget arcu eget nisl volutpat tincidunt. Maecenas pharetra ex ex, sit amet eleifend leo hendrerit ac.

Nulla sed tristique quam. Aliquam quis nisi sit amet mi hendrerit eleifend a feugiat neque. Suspendisse tincidunt auctor dui, quis convallis eros bibendum in. Donec dui ex, sollicitudin quis tristique a, interdum nec nibh. Duis mattis, leo eget consectetur mollis, enim tellus imperdiet ante, eu viverra felis ante scelerisque velit. Integer sit amet tincidunt lectus. Nulla hendrerit lectus est, a mattis augue cursus et. Praesent sit amet nunc lorem. Etiam sollicitudin ut neque a ultrices. Phasellus vel nulla mauris. Donec malesuada porta dui. Praesent mi augue, laoreet nec consectetur nec, tincidunt in erat. Aliquam laoreet vel dolor et mattis. Fusce eu augue ut felis posuere auctor.
  </div>
</div>

然而，在野外这有一个奇怪的错误：有时，并非总是，-webkit-scrollbar-track 出现在其他内容之上。

在这个屏幕截图中有两个 Web 组件，都有阴影 DOM 并使用滚动条的样式，但左边的显示正确，而右边的 -webkit-scrollbar-track -webkit-scrollbar-thumb 位于下一个面板的顶部：

我无法在一个简单的示例中重现此错误 - 我不知道这两个 Web 组件之间有什么不同（或者更确切地说，存在大量差异，但我不知道是哪个导致的）这个）。

更新

感谢@jolan 的想法帮助我找到了原因：从 overflow-y: overlay 切换到 overflow-y: auto 停止滚动条出现在其他内容之上。

这只会让我走到那一步 - 这专门使用 overlay（而不是 scroll 或 auto，因为我想保持内容的水平布局不变，无论父级高度，但我也不想在内容不可滚动时显示滚动条。

这是 overlay 的已知错误吗？谁能指出 blink/webkit 问题？
有谁知道为什么 overlay 这样做，有没有办法在不切换到 auto 或 scroll 的情况下解决它？
有没有不根据垂直高度改变内容宽度的CSS解决方案？它必须在 flex 和 grid 上下文以及显式 height/width.
中工作

Answer 1

首先，你能试试不使用 flexbox 吗？ Flex 仍然存在一些问题，尤其是在这种特殊情况下。

其次，我将所有 css 放在一个 div 上。因为那是你想要滚动条的div。

更新：这修复了原来的问题

第三：将overflow-y:overlay替换成overflow-y:auto

更新：第二个问题

根据 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow 这是一个弃用的问题。根据 https://bugs.webkit.org/show_bug.cgi?id=189811 这是“预期的” 失败'.
因为 'overflow-y: overlay' 已弃用（至少 7 年，如果我正确阅读）它根本没有被维护。这意味着当 -webkit-browsers 更新时，他们将不会使用此功能考虑到。像这样的错误会随着浏览器慢慢显示进化。
我会建议下一个解决方案：
1. 有一些方法可以完全隐藏滚动条（跨浏览器兼容）：https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
2. 我想可以绝对设置滚动条的样式，但是样式滚动条是 ！不是跨浏览器解决方案！
3. 我的建议： 设计或隐藏滚动条通常不是一个好主意。 'overflow-y: overlay' 功能被弃用的原因非常充分。我建议寻找不同的方法。

最后说明：我想指出 overflow-y: overlay 是一个 webkit 特性。它也不能跨浏览器工作。

Answer 2

看起来应该使用描述不同跨浏览器属性的 scrollbar-width and scrollbar-color properties, (see CSSWG draft and issues). Currently firefox is the only browser that implements it though. There is another answer 来设置滚动条的样式。

我的建议是在 Firefox 中按照您的意愿设置滚动条的样式，然后从那里开始，因为这是最有可能确定的行为。

我以前使用以下方法完成跨浏览器滚动条样式设置：

#wrapper {
  height: 125px;
  display: flex;
}

.slim-scroll {
  --scrollbar-track-color: silver;
  --scrollbar-thumb-color: black;

  flex: 1;
  overflow-y: auto;
  scrollbar-color:
    var(--scrollbar-thumb-color)
    var(--scrollbar-track-color);
  scrollbar-gutter: stable;  /* Only works in chrome with Enable experimental Web Platform features flag enabled  */
  scrollbar-width: thin;
}

.slim-scroll::-webkit-scrollbar {
  background-color: var(--scrollbar-track-color);
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
}

.slim-scroll:hover {
  --scrollbar-track-color: steelblue;
  --scrollbar-thumb-color: firebrick;
}

<div id="wrapper">
  <div class="slim-scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt risus eros, non fermentum quam lacinia eu. In nec nibh ipsum. Nunc sollicitudin lectus sed leo euismod, sed tincidunt nunc eleifend. Nunc sed nunc felis. Nunc dolor metus, luctus in aliquet sit amet, congue sed lacus. Cras pellentesque nisl quis quam vehicula, eget fermentum metus luctus. Vestibulum eget arcu eget nisl volutpat tincidunt. Maecenas pharetra ex ex, sit amet eleifend leo hendrerit ac.

Nulla sed tristique quam. Aliquam quis nisi sit amet mi hendrerit eleifend a feugiat neque. Suspendisse tincidunt auctor dui, quis convallis eros bibendum in. Donec dui ex, sollicitudin quis tristique a, interdum nec nibh. Duis mattis, leo eget consectetur mollis, enim tellus imperdiet ante, eu viverra felis ante scelerisque velit. Integer sit amet tincidunt lectus. Nulla hendrerit lectus est, a mattis augue cursus et. Praesent sit amet nunc lorem. Etiam sollicitudin ut neque a ultrices. Phasellus vel nulla mauris. Donec malesuada porta dui. Praesent mi augue, laoreet nec consectetur nec, tincidunt in erat. Aliquam laoreet vel dolor et mattis. Fusce eu augue ut felis posuere auctor.
  </div>
</div>

如您所见，我已经删除了所有 overflow: overlay（根据@Jolan 的回答）以及额外的填充和框阴影。

为了防止内容增大或缩小时布局发生变化，请使用 scrollbar-gutter 并将其设置为 stable（而不是 overflow: overlay）。目前（2021 年 1 月）如果您启用 Enable experimental Web Platform features 功能标志，这仅适用于 chrome。

溢出时停止 -webkit-scrollbar-track 出现在其他内容之上：overlay

Stop a -webkit-scrollbar-track appearing on top of other content when overflow: overlay

html

css

scrollbar

chromium

web-component

更新