美文网首页
自定义滚动条

自定义滚动条

作者: LIsPeri | 来源:发表于2019-03-29 11:21 被阅读0次

引用插件mousewheel.js和easyscroll.js
/滚动条css/

scroller {

position: relative;
width: 620px;
float: left;
    padding:0 40px 40px 40px;

}
.container{
height: auto;

}
.container .div_scroll {
width: 100%;
height:700px;
overflow: auto;
}

.container .scroll_container {
overflow: hidden;
position: relative;
}

.container .scroll_absolute {
position: absolute;
}
.container .scroll_vertical_bar {
position: absolute;
top: 0;
right: 0px;
width:8px;
height: 100%;
background:#fff;
/opacity: 0.2;
filter:alpha(opacity=20);
/
background: url(../image/scroll_bg.png) repeat-y center 0;
margin: 0;
padding: 0;
}
.container .scroll_track {
position: relative;
background-color: transparent;
}

.container .scroll_drag {
position: relative;
top: 0;
left: 0;
cursor: pointer;
background-color: #dbdcdf;
border-radius: 5px;
}
.container .scroll_arrow {
text-indent: -20000px;
display: block;
cursor: pointer;
background-color: #369DB4;
}
.container .scroll_vertical_bar .scroll_arrow {
height: 16px;
}
js部分:
('.div_scroll,.scroll_container').css('height',_h-310);(".div_scroll").scroll_absolute({arrows:false});

$('.wrap .container .faq').css('height',_h-380);
var s=$('.wrap .container .faq').height;
 $(".div_scrolls").scroll_absolute({arrows:false});

相关文章

网友评论

      本文标题:自定义滚动条

      本文链接:https://www.haomeiwen.com/subject/kwzkbqtx.html