Styled Scroll Bar


/ Published in: SASS
Save to your folder(s)

Styling scroll bar


Copy this code and paste it in your HTML
  1. .html:
  2.  
  3. <div id="wrapper">
  4. <div class="scrollbar" id="style-1">
  5. <div class="force-overflow"></div>
  6. </div>
  7. </div>
  8.  
  9.  
  10.  
  11. .scss:
  12.  
  13. .scrollbar
  14. {
  15. margin-left: 30px;
  16. float: left;
  17. height: 300px;
  18. width: 65px;
  19. background: #F5F5F5;
  20. overflow-y: scroll;
  21. margin-bottom: 25px;
  22. }
  23.  
  24.  
  25. .force-overflow
  26. {
  27. min-height: 450px;
  28. }
  29.  
  30.  
  31. #wrapper
  32. {
  33. text-align: center;
  34. width: 500px;
  35. margin: auto;
  36. }
  37.  
  38. #style-1::-webkit-scrollbar-track
  39. {
  40. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  41. border-radius: 3px;
  42. background-color: #F5F5F5;
  43. }
  44.  
  45. #style-1::-webkit-scrollbar
  46. {
  47. width: 12px;
  48. background-color: #F5F5F5;
  49. }
  50.  
  51. #style-1::-webkit-scrollbar-thumb
  52. {
  53. border-radius: 10px;
  54. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  55. background-color: #555;
  56. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.