1. 程式人生 > >隱藏滾動條 (對各種瀏覽器進行的scroll-bar設定)

隱藏滾動條 (對各種瀏覽器進行的scroll-bar設定)

/*webkit核心*/
.scroll_content::-webkit-scrollbar {
    width:0px;
    height:0px;
}
.scroll_content::-webkit-scrollbar-button    {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track     {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track-piece {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-corner {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-resizer  {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar {
    width:10px;
    height:10px;
}
/*o核心
*/ .scroll_content .-o-scrollbar{ -moz-appearance: none !important; background: rgba(0,255,0,0) !important; } .scroll_content::-o-scrollbar-button { background-color:rgba(0,0,0,0); } .scroll_content::-o-scrollbar-track { background-color:rgba(0,0,0,0); } .scroll_content::-o-scrollbar-track-piece { background-color:rgba(0,0,0,0); } .scroll_content::-o-scrollbar-thumb{ background-color:rgba(0,0,0,0); } .scroll_content::-o-scrollbar-corner { background-color:rgba(0,0,0,0); } .scroll_content::-o-scrollbar-resizer { background-color:rgba(0,0,0,0); } /*IE10,IE11,IE12*/ .scroll_content{ -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; overflow: auto; } <script src="lib/jquery.min.js"></script> <script src="lib/jquery.nicescroll.min.js"></script> $(function(){ //FF下用
JS實現自定義滾動條 $(".scroll_content").niceScroll({cursorborder:"",cursorcolor:"rgba(0,0,0,0)",boxzoom:true}); })