How to customize scrollbar in div?

Question

I have a menu that uses offcanvas from Bootstrap but wanted to style his scrollbar in the style of Facebook chat.

Answer 1

The problem is that customizing the scroll is not something that’s in the specification, so it’s not a need for browsers to implement this feature. Some include this feature and allows the scroll to be customized, I repeat: Some.

Furthermore, what you need to do is scroll with CSS and Javascript. This is the only way to have functionality cross browser, that is why there are several plugins dealing with this feature.

Custom Scrollbar

$(function() {
  $('div').mCustomScrollbar();
});

div {
  height: 100px;
  width: 50%
}

<!-- dependência do JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Plugin -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.min.js"></script>

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis risus at orci fringilla, et egestas turpis hendrerit. Nulla vel leo urna. Donec blandit fermentum orci in imperdiet. Aliquam erat volutpat. Donec sed elit mi. Nunc eu nulla nulla.
  </p>
</div>

---

Nice Scroll:

$(function() {
  $('div').niceScroll();
});

div {     
  height: 100px;
  width: 50%
}

<!-- dependência o JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js"></script>

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis risus at orci fringilla, et egestas turpis hendrerit. Nulla vel leo urna. Donec blandit fermentum orci in imperdiet. Aliquam erat volutpat. Donec sed elit mi. Nunc eu nulla nulla.
  </p>
</div>

Besides the appearance above it is possible to customize it, so Linkei projects for you to read the documentation of how to do this. If neither of the two meet your needs, know that there are several other.

Answer 2

Your question is pretty generic, because it doesn’t have a minimum, complete and verifiable example. So, assuming you want to know which elements (in this case, pseudo-elements) you should style, they are

::-webkit-scrollbar              
::-webkit-scrollbar-button       
::-webkit-scrollbar-track        
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb        
::-webkit-scrollbar-corner       
::-webkit-resizer  

What I know, only the browsers that have the Webkit behind will enable you to do this styling. No CSS-Tricks there’s an article about it (that’s where I got the elements from). This discussion Gringo brings with it all the details of cross-browser styling.