jquery - firefox 上的自定义滚动条支持，但是否可以在没有 jQuery 的情况下制作？或者是否有可能来自 React js 库？

Question

我正在尝试从 css 制作自定义滚动条，它在 chrome 上工作，但在 firefox 上不工作。怎么才能实现还是需要用js？你能推荐我吗？

html {
  overflow: auto;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
}

.wrapper {
  padding: 10px;
  width: 500px;
  height: 300px;
  border: 1px solid #333;
  overflow-y: scroll;
}

.wrapper::-webkit-scrollbar {
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: #ccc;
}

.wrapper::-webkit-scrollbar-thumb {
  background: #333;
}

<div class="wrapper">
	<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem adipisci facilis ad! Delectus, minus! Saepe accusantium inventore obcaecati, enim repudiandae officia modi earum distinctio, blanditiis impedit provident dicta tempore tempora ratione sapiente unde, incidunt soluta ducimus aspernatur eius neque! Doloribus rem temporibus commodi voluptates aliquid quae odio deserunt iusto unde possimus mollitia molestias molestiae dicta at aspernatur saepe quidem, animi accusantium asperiores. Perferendis libero commodi similique facilis. Quae ea nulla itaque cumque porro error excepturi dignissimos, pariatur unde magni sapiente dolorem sint exercitationem deleniti? Ad itaque quaerat vero et, magni velit repudiandae officiis, sequi repellendus quod odio, rerum veritatis porro eveniet tempora error molestias corrupti illo voluptatem vitae a autem laborum. Nesciunt minus quisquam sint, incidunt eaque corporis odio sunt provident consequatur voluptate eveniet vel commodi beatae voluptatem alias tenetur. Sint aperiam enim pariatur a hic consequuntur, iste optio harum praesentium adipisci, architecto sit delectus quo eveniet reiciendis nihil incidunt temporibus labore. Sapiente, veritatis recusandae totam quae doloribus sequi quo sunt, architecto perferendis dolorem sit. Vitae quibusdam dolores omnis officiis, nobis nisi enim itaque aliquid voluptatibus amet. Tempora, temporibus! Unde est nostrum aliquam fugit impedit culpa praesentium ut ipsum labore, magni autem ea, voluptas assumenda fugiat? Enim expedita sint quae.</div>
</div>

Answer 1

-webkit 前缀的 CSS 规则仅适用于基于 WebKit 的浏览器(Chrome、Safari、Edge 等)。

Firefox 使用不同的 HTML 呈现引擎 (Gecko)，它不支持 -webkit 规则，例如自定义滚动样式:https://css-tricks.com/almanac/properties/s/scrollbar/

尽管在 Firefox 中可以使用 JavaScript 解决方案来模拟可以设置样式的滚动条，请在此处查看答案:Custom CSS Scrollbar for Firefox