js/plugin/Scrollbar/自定义网页滚动条demo/css/jquery.mCustomScrollbar.css

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

/*滚动条生成的容器*/
.mCSB_container { width: auto; margin-right: 30px; overflow: hidden; }
.mCSB_container .mCS_no_scrollbar { margin-right: 0; }

/*滚动条的容器*/
.mCustomScrollBox .mCSB_scrollTools { width: 16px; height: 100%; top: 0; right: 0; opacity: 0.75;background:#272928;border:4px solid #000;border-radius:10px}
.mCSB_horizontal.mCustomScrollBox .mCSB_scrollTools { width: 972px; height: 16px; top: auto; right: auto; bottom: 0; left: 0; overflow: hidden; }

/*滚动条的上下按钮*/
.mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { height: 20px; overflow: hidden; margin: 0 auto; cursor: pointer; }
.mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { background-image: url(../images/mCSB_buttons.png); background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; /* old ie */ }
.mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0;/* 
	sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) 
	*/
}

/*滚动条的百分比背景*/
.mCSB_scrollTools .mCSB_draggerRail { background: #272928;}
.mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft+.mCSB_draggerContainer { padding-bottom: 0; padding-right: 20px; }

.mCS_disabled .mCSB_container .mCS_no_scrollbar , .mCS_destroyed .mCSB_container .mCS_no_scrollbar 
{ margin-right: 30px; }

.mCSB_scrollTools .mCSB_draggerContainer { height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.mCSB_scrollTools .mCSB_buttonUp+.mCSB_draggerContainer { padding-bottom: 40px; }

.mCSB_scrollTools .mCSB_dragger { cursor: pointer; width: 100%; height: 30px; }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; }

.mCSB_scrollTools .mCSB_buttonDown { bottom: 0; margin-top: -40px; }
/* horizontal scrollbar */
.mCSB_horizontal .mCSB_container { height: auto; margin-right: 0; margin-bottom: 30px; overflow: hidden; }
.mCSB_horizontal .mCSB_container.mCS_no_scrollbar { margin-bottom: 0; }
.mCS_disabled .mCSB_horizontal .mCSB_container.mCS_no_scrollbar, .mCS_destroyed .mCSB_horizontal .mCSB_container.mCS_no_scrollbar { margin-right: 0; margin-bottom: 30px; }

.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerContainer { height: 100%; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; }

.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.mCSB_horizontal .mCSB_scrollTools .mCSB_dragger { width: 30px; height: 100%; }

.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight { width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; float: left; }
.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight { right: 0; bottom: auto; margin-left: -40px; margin-top: -16px; float: right; }
/* default scrollbar colors and backgrounds */

.mCustomScrollBox:hover .mCSB_scrollTools { opacity: 1; }
/*滑动块*/
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background: #ffdd44;}
.mCSB_horizontal .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 16px;border-radius: 10px; }
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; /* old ie */ }
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; /* old ie */ }

.mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px;/* 
	sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) 
	*/
}
.mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px;/* 
	sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) 
	*/
}