Custom scrollbar support on firefox but is it possible to make without jQuery? or is it possible from react js library?

I am trying to make custom scrollbar from css and its working on chrome but not in firefox. How can achieve or need to use js? can you suggest me?

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>

Answers 1

Related Articles