Cacher is the code snippet organizer for pro developers

// Стилизация с помощью css

.scroll-template
	&::-webkit-scrollbar
		-webkit-appearance: none
		width: 4px
		height: 8px
		background: #DCDFE8
		border-radius: 4px
	&::-webkit-scrollbar-thumb
		border-radius: 4px
		background: $mark

// для perfect-scrollbar

#container
  position: relative;
  height: 100%; /* Or whatever you want (e.g. 400px) */


//visible scrollbar
.ps__scrollbar-y-rail
  background-color #eaeaea !important
  opacity 1!important

.ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y, .ps > .ps__scrollbar-y-rail:active > .ps__scrollbar-y
	width: 10px
.ps > .ps__scrollbar-y-rail
	width: 10px
	background-color #f6f6f6!important
	opacity 1!important
	

//bower i --save-dev perfect-scrollbar
// link(rel="stylesheet", href="bower/perfect-scrollbar/css/perfect-scrollbar.css")
//script(src="bower/perfect-scrollbar/js/perfect-scrollbar.jquery.js")
//https://github.com/noraesae/perfect-scrollbar

$('.scroll').perfectScrollbar({
	wheelSpeed: 0.2
	//suppressScrollY: true, // --- for horisontal scroll
	//useBothWheelAxes: true,
});


// Второй вариант 

//link(rel="stylesheet", href="bower/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css")
//script(src='bower/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js')
 
//bower install malihu-custom-scrollbar-plugin
 
//http://manos.malihu.gr/jquery-custom-content-scroller/
//https://github.com/malihu/malihu-custom-scrollbar-plugin
 
$(".content").mCustomScrollbar({
  autoDraggerLength: false // size druger
});