时间戳

首页 > 解决方案 > 如何确保 osx 和 windows 之间的滚动条样式一致性？

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

问题描述

我有一个带有滚动条的基本容器。默认滚动条在 osx 的浏览器上看起来非常好。但在 Windows 上，我知道样式可能非常老派。我没有windows电脑。如何确保这些操作系统之间的样式保持一致？有没有一种简单的方法来强制滚动条的样式，这样我也可以在 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>

标签： cssscrollbar

解决方案

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

例如：

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

推荐阅读