pc端
滚动条可以自定义css,滚动条也可以拖动,但是文字可以选中但是不可以拖动,所以适用于pc端。
HTML结构:
<div class="scroll_wrap">
<div class="scroll_cont">
滚动内容
</div>
<div class="scroll_bar">
<div class="scroll_slider"></div>
</div>
</div>
js
<script type="text/javascript">
new CusScrollBar({
contentSelector: '.scroll_cont', //滚动内容区
barSelector: '.scroll_bar', //滚动条
sliderSelector: '.scroll_slider' //滚动滑块
});
</script>
外部引入文件:
https://github.com/TumbledLeo/xbnl2019/blob/master/lib/roll.css
https://github.com/TumbledLeo/xbnl2019/blob/master/lib/scrollbar.js
移动端
文字可以拖动,滚动条也可以拖动,但是文字不可选中,另外这个框架初始化的时候滚动部分必须是显示的,否则获取不到高度也就无法滚动。
介绍:https://blog.csdn.net/R_K_C/article/details/97118153