jquery.nicescroll美化滚动条插件鼠标滑过显示或隐藏滚动条

最新推荐文章于 2024-06-25 17:32:29 发布

学习代表未来

最新推荐文章于 2024-06-25 17:32:29 发布

阅读量1.7k

点赞数

参考插件 jquery.nicescroll

参数详解

1.dom元素

<div class="box">
	<div class="title">
		
	</div>
	<div class="table_box">
        <table>
            <thead>
                <tr>
                    <th><strong>充值时间</strong></th>
                    <th><strong>充值金额</strong></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2018-06-11   11:31:47</td>
                    <td>0.01</td>
                </tr>
                <tr>
                    <td>2018-06-11   11:31:47</td>
                    <td>0.01</td>
                </tr>
                <tr>
                    <td>2018-06-11   11:31:47</td>
                    <td>0.01</td>
                </tr>
                <tr>
                    <td>2018-06-11   11:31:47</td>
                    <td>0.01</td>
                </tr>
                <tr>
                    <td>2018-06-11   11:31:47</td>
                    <td>0.01</td>
                </tr>
                <tr>
                    <td>2018-06-11   11:31:47</td>
                    <td>0.01</td>
                </tr>
                <tr>
                    <td>2018-06-11   11:31:47</td>
                    <td>0.01</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

2.javascript 代码

<script src="jquery.js"></script>
<script src="jquery.nicescroll.min.js"></script>
<script>
  $('.box .table_box').niceScroll({
        cursorcolor: "green",
        cursoropacitymin: 0,
        cursoropacitymax: 1,
        cursorwidth: 6,
        cursorborderradius: "5px",
        autohidemode: 'leave', // 隐藏滚动条的方式,仅在指针离开内容时隐藏
        boxzoom:true
    });
</script>