How to customize scroll bar in div? [duplicate]

Navigation
2

I have a menu that uses Bootstrap offcanvas but I wanted to style its scroll bar in the style of Facebook chat.

    
asked by anonymous 13.10.2015 / 21:07

2 answers

2

The problem is that custom scrolling is not something that is in the specification, so there is no need for browsers to implement this feature. Some include this feature and allows the scroll to be customized, I repeat: Some.

In addition, what you need to do is scroll with CSS and Javascript. This is the only way to have a cross browser functionality, which is why there are several plugins that handle 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--><linkhref="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>Loremipsumdolorsitamet,consecteturadipiscingelit.Vivamusfacilisisrisusatorcifringilla,etegestasturpishendrerit.Nullavelleourna.Donecblanditfermentumorciinimperdiet.Aliquameratvolutpat.Donecsedelitmi.Nunceunullanulla.</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--><scriptsrc="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>

In addition to the above look you can customize it, so linkei the projects for you to read the documentation on how to do this. If neither of you meets your needs, there are several more.

    
13.10.2015 / 21:34
0

Your question is pretty general, as it does not come with a minimal, complete, and verifiable example . So assuming you want to know what 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 webkit behind will allow you to make this stylization. In the CSS-Tricks has an article about it (that's where I took the elements). This discussion in Gringo OS brings you all the details of doing this stylization cross -browser.

    
13.10.2015 / 21:14
Is it possible to convert .NET Framework applications from Windows to Mac? How do I change the view of a select's options on mobile devices?