使用jScrollPane.js美化元素滚动条效果

jScrollPane 是一款滚动条美化插件，它将浏览器的默认滚动条或是元素溢出时出现的滚动条映射成一个HTML结构，从而很容易地使用CSS来定义滚动的样式。 它不仅仅可以美化垂直的滚动条，它还可以美化水平滚动条效果。

那么如何使用这个插件呢？下面分享给大家

如何使用

jScrollPane的使用非常简单。您需要下载必要的文件并将它们放在您的服务器上。然后你只需要将相关文件包含在文档的 head 中：

<!-- jScrollPane 需要的样式 -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<!-- 直接来自 jQuery CDN 的最新 jQuery -->
<script type="text/javascript" src="js/jquery-3.5.1.min.js"> </script>

<!-- 鼠标滚轮插件 - 可选提供鼠标滚轮支持 -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>

<!-- jScrollPane 脚本 -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

然后你只需要在 document.ready 上初始化 jScrollPane （使用选择器它将找到你想要应用 jScrollPane 的内容）：

$(function()
{
	$('.scroll-pane').jScrollPane();
});

使用 jScrollPane 有多种不同的方法 - 可以在初始化时传递不同的参数

参数说明

<script>
$('.scroll-pane').jScrollPane(
    showArrows - boolean (default false)//显示滑杆两边的箭头
    maintainPosition - boolean (default true)//保持原位置
    stickToBottom- boolean (default false)//滑到底部
    stickToRight- boolean (default false)//滑到最右边
    autoReinitialise - boolean (default false)//自动加载出现滑杆
    autoReinitialiseDelay - int (default 500)//自动加载的时间延迟
    verticalDragMinHeight - int (default 0)//垂直拖拽的最小高度
    verticalDragMaxHeight - int (default 99999)//处置拖拽的最大高度
    horizontalDragMinWidth - int (default 0)//水平拖拽的长度
    horizontalDragMaxWidth - int (default 99999)//水平拖拽的最大长度
    contentWidth - int (default undefined)//内幕内用的宽度
    animateScroll - boolean (default false)//滚动动画
    animateDuration - int (default 300)//动画延迟
    animateEase - string (default 'linear')//动画轨迹
    hijackInternalLinks - boolean (default false)//截获内部链接
    verticalGutter - int (default 4)//处置不掉长度
    horizontalGutter - int (default 4)//水平不掉长度
    mouseWheelSpeed - int (default 10)//鼠标疼速度
    arrowButtonSpeed - int (default 10)//方向键按钮的速度
    arrowRepeatFreq - int (default 100)//按钮事件重复频率
    arrowScrollOnHover - boolean (default false)//接手鼠标在方向键上滑过的动作
    verticalArrowPositions - string [split|before|after|os] (default split)//垂直方向上按钮的位置
    horizontalArrowPositions - string [split|before|after|os] (default split)//水平方向上按钮的位置
    enableKeyboardNavigation - boolean (default true)//是否接受键盘操作 
    hideFocus - boolean (default false)//隐藏焦点
    clickOnTrack - boolean (default true)//路径上点击操作
    trackClickSpeed - int (default 30)//互动轨迹上的点击速度
    trackClickRepeatFreq - int (default 100)//滑动轨迹上的重复频率 
);
</script>