minisite 自定义滚动条

2020-04-07  本文已影响0人  LIsPeri

html:
<div class='container'>
<div class='div_scrolls'>
需要滚动的内容
</div>
</div>

css:

scroller { position: relative; width: 620px; float: left; /border-right:1px solid #7c808f;/ padding:0 40px 40px 40px; }

.container .div_scroll { width: 100%;overflow: auto; }
.container .scroll_container { overflow: hidden; position: relative;height:800px }
.container .scroll_absolute { position: absolute; }
.container .scroll_drag { position: relative; top: 0; left: 0; cursor: pointer; background-color: #f4f3f6; border-radius: 5px; }
.container .scroll_vertical_bar { position: absolute; top: 0px; right: 8px; width:8px; height: 100%; background:#c7c4d4; background: url(../image/scroll_bg.png) repeat-y center 0; margin: 0; padding: 0; }
.container .scroll_track {border-radius: 5px; position: relative; background-color: #c7c4d4;border: 1px solid #cdcad8; }
.container .scroll_arrow { text-indent: -20000px; display: block; cursor: pointer; background-color: #369DB4; }
.container .scroll_vertical_bar .scroll_arrow { height: 16px; }

js:

需要引入mousewheel.js和easyscroll.js两js

var _h=document.body.clientHeight;
('.div_scroll,.scroll_container').css('height',_h-310);(".div_scroll").scroll_absolute({arrows:false});

上一篇下一篇

猜你喜欢

热点阅读