html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
ul {
height: 250px;
overflow: scroll;
border: 1px solid black;
}
</style>
<body>
<ul>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script>
<!-- <script src="js/jquery.js" charset="utf-8"></script> -->
<!-- <script src="js/jquery.nicescroll.js" charset="utf-8"></script> -->
<script type="text/javascript">
$(document).ready(function () {
for (let index = 0; index < 50; index++) {
$("ul")[0].innerHTML += "<li>" + index + "</li>"
}
/**
* 初始化滚动条
* $("ul").niceScroll();
*/
/**
* 带返回对象的初始化
var nice = $("ul").niceScroll();
console.log(nice)
*/
//改变光标颜色
//$("ul").niceScroll({ cursorcolor: "#00F" });
//如需在初始化后对nicesroll重写,可以使用如下代码获取nicesroll对象后重新编写.
//$("ul").niceScroll();
// var nice = $("ul").getNiceScroll();
// console.log(nice);
//隐藏滚动条
//$("ul").getNiceScroll().hide();
//检查滚动条的大小调整（当内容或位置发生变化时）
// setTimeout(() => {
// console.log('改变滚动条大小');
// $("ul").getNiceScroll().resize()
// }, 1000*5);
//滚动到指定位置
//$("ul").getNiceScroll(0).doScrollLeft(x, duration); // 滚动X轴
//$("ul").getNiceScroll(0).doScrollTop(y, duration); // 滚动Y轴
// const nice = $("ul").niceScroll({ cursorcolor: "#00F" });
// nice.hide()
// let i = 0
// setInterval(() => {
// i++
// if (i > nice.page.maxh) i = 0;
// nice.doScrollTop(i*10, 100)
// }, 1000)
});
//配置参数
$("#thisdiv").niceScroll({
cursorcolor: "#424242", // 更改十六进制光标颜色
cursoropacitymin: 0, // 当游标处于非活动状态时(scrolllabar处于"隐藏"状态)，改变不透明度，范围从1到0
cursoropacitymax: 1, // 改变游标激活时的不透明度(scrolllabar "visible"状态)，范围从1到0
cursorwidth: "5px", // 光标宽度(以像素为单位)(也可以写成"5px")
cursorborder: "1px solid #fff", // CSS定义游标边框
cursorborderradius: "5px", // 以像素为单位的光标边界半径
zindex: "auto" | [number], //更改滚动条div的z-index
scrollspeed: 60, // 滚动速度
mousescrollstep: 40, // 鼠标滚轮滚动速度(像素)
touchbehavior: false, // 弃用! !使用"emulatetouch"
emulatetouch: false, // enable cursor-drag scrolling like touch devices in desktop computer
hwacceleration: true, // 弃用! !使用"emulatetouch"像桌面电脑中的触摸设备一样启用光标拖动滚动功能
boxzoom: false, // 启用缩放框内容
dblclickzoom: true, // (仅当boxzoom=true时)当双击box时，缩放激活
gesturezoom: true, // (仅当boxzoom=true和触摸设备)缩放激活时，在盒子上捏出/进入
grabcursorenabled: true, // (仅当touchbehavior=true时)显示"抓取"图标
autohidemode: true, //如何隐藏滚动条的工作，可能的值:
//true | // 不滚动时隐藏
//"cursor" | // only cursor hidden
// false | // 不隐藏,
// "leave" | // 仅当指针离开内容时隐藏
// "hidden" | // 一直隐藏
// "scroll", // 仅在滚动时显示
background: "", // 将CSS更改为rail背景
iframeautoresize: true, // 加载事件时自动调整iframe的大小
cursorminheight: 32, // 设置最小光标高度(像素)
preservenativescrolling: true, // 您可以使用鼠标滚动本地可滚动区域，冒泡鼠标滚轮事件
railoffset: false, // 您可以添加偏移顶部/左侧的轨道位置
bouncescroll: false, // (only hw accell) 像移动设备一样在内容末尾启用滚动弹动
spacebarenabled: true, // 当按下空格键时，启用页面向下滚动
railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, //设置栏杆的填充
disableoutline: true, // 对于chrome浏览器，在使用nicescroll选择div时禁用outline(橙色高亮)
horizrailenabled: true, // Nicescroll可以管理水平滚动
railalign: right, // 纵轨对准
railvalign: bottom, // 水平钢轨对准
enabletranslate3d: true, // Nicescroll可以使用CSS转换滚动内容
enablemousewheel: true, // Nicescroll可以管理鼠标滚轮事件
enablekeyboard: true, // Nicescroll可以管理键盘事件
smoothscroll: true, // 滚动轻松移动
sensitiverail: true, // 点击轨道使滚动
enablemouselockapi: true, // 可以使用鼠标标题锁API(对象拖动也存在同样的问题)
cursorfixedheight: false, // 以像素为单位设置固定的光标高度
hidecursordelay: 400, // 设置延迟微秒淡出滚动条
directionlockdeadzone: 6, // 死区像素方向锁定激活
nativeparentscrolling: true, // 检测内容底部并让父滚动，就像本机滚动一样
enablescrollonselection: true, // 当选择文本时，启用自动滚动内容
cursordragspeed: 0.3, // 用光标拖动时的选择速度
rtlmode: "auto", // 水平div滚动从左侧开始
cursordragontouch: false, // 在触摸中拖动光标
oneaxismousemode: "auto", // 它允许水平滚动与鼠标滚轮水平的内容，如果false(仅垂直)鼠标滚轮不水平滚动，如果值为自动检测两轴鼠标
scriptpath: "", // 为boxmode图标定义自定义路径("" =>脚本路径相同)
preventmultitouchscrolling: true, // 防止在多点触控事件上滚动
disablemutationobserver: false, // force MutationObserver禁用，
enableobserver: true, // 启用DOM更改观察者，它尝试调整大小
scrollbarid: false // 为nice滚动条设置自定义ID
});
</script>
</body>
</html>