如何确保 osx 和 windows 之间滚动条样式的一致性？

Question

我有一个带滚动条的基本容器。默认滚动条在 osx 的浏览器上看起来非常漂亮。但是在 Windows 上，我知道样式可能非常老派。我没有 windows 电脑。如何确保这些 os 之间的样式保持一致？有没有一种简单的方法来强制滚动条的样式，这样我也可以在 windows 上获得这种深色圆角渲染？

这是一个基本示例：

body{
  background:black;
}

.container{
  background:#bbb;
  height:150px;
  overflow:scroll;
}

<div class="container">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>

Answer 1

这对于浏览器的原生滚动条是不可能的。例如 Firefox 不接受本机滚动条的样式。使用 CSS 设置原生滚动条的样式永远不会保持一致。你必须使用虚拟滚动条库。

例如：

OverlayScrollbars（一个 javascript 滚动条插件，它隐藏了本机滚动条，提供了自定义样式的覆盖滚动条并保持了本机的功能和感觉。）
simplebar（自定义滚动条 vanilla javascript 带有原生滚动的库，简单、轻量级、易于使用和跨浏览器。）

如何确保 osx 和 windows 之间滚动条样式的一致性？

How to ensure scrollbar styling consistency between osx and windows?

css

scrollbar