mac OS mozilla firefox 和 mobile safari 上的滚动条答案

【问题标题】：Scrollbar on mac OS mozilla firefox and mobile safarimac OS mozilla firefox 和 mobile safari 上的滚动条
【发布时间】：2022-02-10 08:35:13
【问题描述】：

有人可以帮助我使用 Mozilla firefox 和移动 safari 中 Mac OS X 上的滚动条吗？ css 中的滚动条颜色仅适用于 windows 机器，其他 js 库不适用，滚动条始终具有系统默认样式。也许有人已经与此打过交道？

【问题讨论】：

标签： css macos mobile safari scrollbar

【解决方案1】：

它对我有用，没有任何问题。 ::-webkit-scrollbar-thumb::-webkit-scrollbar-track和::-webkit-scrollbar

更多信息developer.mozilla

div{
  width: 400px;
  height: 400px;
  background: yellow;
  overflow: auto;
}
::-webkit-scrollbar-thumb {
    background: #0a59e3;
    border-radius: 16px;
    box-shadow: inset 2px 2px 2px hsl(219deg 31% 32%), inset -2px -2px 2px rgb(18 24 38);
}
::-webkit-scrollbar-track {
    background: #0f1520;
}
::-webkit-scrollbar {
    width: 1.65em;
    height: 1.65em;
    background: red;
}

<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
  Proin at nulla elementum, consectetur ex eget, commodo ante.
  Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
  mattis cursus dolor. Pellentesque id pretium est. Quisquebibendum ut dignissim et, maximus eget nibh. Phasellus
  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
  mattis cursus dolor. Pellentesque id pretium est. Quisquebibendum ut dignissim et, maximus eget nibh. Phasellus
  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
  mattis cursus dolor. Pellentesque id pretium est. Quisque
  convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
</div>

【讨论】：

它在 Mac OS X firefox 上不起作用 :(
@arm-channel 我有一台 MacBook Pro（15 英寸，2017 年），它可以在 google 和 safari 中正常运行
在 google 和 safari 中可以，但在 Mozilla firefox 上无效