Question

我正在尝试从css制作自定义滚动条，并且它在chrome上工作但不在firefox中。如何实现或需要使用js？你能建议我吗？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

-webkit前缀CSS规则仅适用于基于WebKit的浏览器（Chrome，Safari等）。

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

虽然可以在Firefox中使用javascript解决方案来模拟可以设置样式的滚动条，但请在此处查看答案：Custom CSS Scrollbar for Firefox

在Firefox上自定义滚动条支持但是没有jQuery可以制作吗？或者它可能来自react js库吗？

1 个答案: