(二) 美化滚动条 - JScrollPane.js

最新推荐文章于 2025-07-18 10:13:16 发布

转载最新推荐文章于 2025-07-18 10:13:16 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuxi2018/p/11149764.html

文章标签：

#javascript #ViewUI

本文详细介绍了JScrollPane组件的使用方法，包括如何引入文件、基本使用、参数选项等。提供了丰富的配置选项，如显示滑杆箭头、保持滚动位置、自动重新初始化等，适用于各种滚动条需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JScrollPane资料

Api查看

由于官网Api地址不能访问，查看Api只能去Github上下载对应的案例。或查看插件库的文档 - jQ22对应的案例

引入文件

<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

DOM结构

<div class="scroll-pane">
    ...内容           
</div>

基本使用

$(function() {
    var element = $('.scroll-pane').jScrollPane();
    // 获取特定滚动条窗口的API参考，可以访问应用元素中的jsp变量
    var api = element.data('jsp');
});

参数选项

$('.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)//滑动轨迹上的重复频率 
);

转载于:https://www.cnblogs.com/yuxi2018/p/11149764.html