3

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>
Ram kumar
  • 3,152
  • 6
  • 32
  • 49
  • Possible duplicate of [Custom CSS Scrollbar for Firefox](https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox) – Matthew Oct 30 '17 at 05:20
  • You can use this plugin called jQuery custom content scroller Here is the link: http://manos.malihu.gr/jquery-custom-content-scroller/ its the best plugin I have ever used. It has the all the feature which might be very helpful. – Harden Rahul Oct 30 '17 at 05:39
  • 1
    @Matthew yea i see but even i have tried with some flex basis so asked again. – Ram kumar Oct 30 '17 at 05:44
  • @HardenRahul ok i will try once mate – Ram kumar Oct 30 '17 at 05:47

1 Answers1

4

-webkit prefixed CSS rules are for browsers based on WebKit only (Chrome, Safari, Edge etc.).

Firefox uses a different HTML rendering engine (Gecko) which doesn't support -webkit rules such as custom scrolling styles: https://css-tricks.com/almanac/properties/s/scrollbar/

It's possible to use JavaScript solutions though in Firefox to emulate the scrollbar which can then be styled, see the answers here: Custom CSS Scrollbar for Firefox

Matthew
  • 1,630
  • 1
  • 14
  • 19
  • Ok boss I will try once.. But client don't want jQuery so ruining on this issue. Is there any way from reactjs. is there anything to make it without jquery.. they are using react so asking you – Ram kumar Oct 30 '17 at 05:46
  • 1
    Don't forget to vote up any useful comments or answers. – Matthew Oct 30 '17 at 05:55
  • Why not.. I i will give credit dude and contribute highly on social development forums and community – Ram kumar Oct 30 '17 at 06:06