Advanced Search

Styled Scroll Bar

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

Expand | Embed | Plain Text

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.