<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.em.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript"> $(function()
{
// this initialises the demo scollpane on the page.
$('#pane1').jScrollPane();
}); </script>

常用的参数配置项

1、showArrows:是否显示滚动箭头,模式是false;

2、maintainPosition:当滚动区重新初始化后,是否保持滚动条的原有位置,默认是true;

3、stickToBottom:当maintainPosition设置为true,且滚动区域到达底部,当有新内容添加的时候任然会固定在滚动区域底部,默认是false;

4、stickToRight:与stickToBottom属性原理类似,只是方向是右侧而不是底部;

5、autoReinitialise:自动初始化滚动区,内部实现机制实际上是一个定时器,当检测到内部有内容新增时,重新初始化,由于性能原因,默认false;

6、autoReinitialiseDelay:当autoReinitialise设置为true时,该属性表示自动初始化的延时,默认是500ms;

7、verticalDragMinHeight:垂直可拖动的最小高度,默认是0;

8、verticalDragMaxHeight:垂直可拖动的最大高度,默认是99999;

9、horizontalDragMinWidth:水平可拖动的最小距离,默认是0;

10、horizontalDragMaxWidth:水平可拖动的最大距离,默认是99999;

11、contentWidth:滚动区域的宽度,一般不要设置,该插件会根据内容实际宽度计算,默认undefined;

12、animateScroll:当调用scrollTo 或者scrollBy的时候,设置一个动画效果,包括时长duration和渐变ease,默认false;

13、animateDuration:动画时长,默认300ms;

14、animateEase:动画渐变函数,默认linear;

15、hijackInternalLinks:劫持锚链接,定位到滚动区域指定位置,默认false;

16、verticalGutter:垂直方向,内容和滚动条之间的距离,默认是4px;

17、horizontalGutter:水平方向,内容和滚动条之间的距离,默认是4px;

18、mouseWheelSpeed:鼠标滚轮的速度,默认是10px;

19、arrowButtonSpeed:方向按钮滚动内容的速度,默认是10px;

20、arrowRepeatFreq:按住方向按钮,内容滚动的频率,默认是100ms;

21、arrowScrollOnHover:当鼠标悬浮在方向按钮上时,是否允许滚动,默认false;

22、verticalArrowPositions:垂直方向按钮和固定点的位置,默认split;

23、horizontalArrowPositions:同上,水平方向;

24、enableKeyboardNavigation:是否允许键盘导航,默认true;

25、hideFocus:是否隐藏焦点框,默认false;

26、clickOnTrack:当点击固定点的时候,是否向相应方向滚动内容,默认true;

27、trackClickSpeed:点击固定点的滚动速度,默认是30px;

28、trackClickRepeatFreq:点击固定点的滚动频率,默认是100ms。

如果要修改滚动条的默认样式可以打开jquery.jscrollpane.css文件修改

下载地址

jQuery Scroll div滚动条样式更改的更多相关文章

  1. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  2. jquery两个滚动条样式

    jquery两个滚动条样式 点击下载

  3. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  4. jquery判断div滚动条到底部

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...

  5. HTML div 滚动条样式设计

    ::-webkit-scrollbar-track-piece{ background-color:#fff;/*滚动条的背景颜色*/ -webkit-border-radius:0;/*滚动条的圆角 ...

  6. 修改DIV滚动条样式

    /*滚动条样式*/ div::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 5px; } div::-w ...

  7. JQuery 控制div滚动条保持最下

    $("#session_show").animate({ scrollTop: $("#session_show").scrollHeight },1000); ...

  8. HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

  9. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

随机推荐

  1. JS-商品图片点击轮换

    //小图预览区域图片轮换键const LIWIDTH=62;var moveCount=0;document.getElementById("btForward").onclick ...

  2. PHPCMS V9网站更换域名的方法

    网站在发展的过程中,很可能多次的修改域名.那么在phpcms v9中我们要怎么进行设置呢? 请进行以下步骤的修改: 1.修改/caches/configs/system.php里面所有和域名有关的,把 ...

  3. Spark运行问题备忘一(网络搜集)

    问题一 ERROR storage.DiskBlockObjectWriter: Uncaught exception -9ca8//shuffle_1_1562_27 java.io.FileNot ...

  4. i++ 与 ++i 的从字节码层面看二者的区别

    /** * javap命令可以对class反汇编得到其字节码文件(此命令并不是jdk8开始的,只不过jdk8中对工具进行加强,增加了一些参数,可通过 javap -help了解) * * 注意: * ...

  5. 使用Reaver加PIN码秒破WPA-PSK密码

    之前掌握到的破解WPA-PSK密码仅限于使用aircreack工具包获取handshake后挂字典爆破方式,而能否破解出wpa密码完全依赖于字典强度了.除了该方式外还有一个更有效的办法,就是使用路由P ...

  6. 『邪恶のWIFI』搭建假冒WIFI热点等女神来蹭网啊 - -。

    pic by baidu 0x 00 ╮(╯▽╰)╭ 请喊我万恶的标题党  哈哈哈哈哈 0x 01 这里正题 虚拟机(Kali)不支持内置网卡,还好我有神器,插上我的RT8187L,开始搞起 参考资料 ...

  7. Uubntu E: Sub-process /usr/bin/dpkg returned an error code问题的解决办法

      cd /var/lib/dpkg   sudo mv info info.bak   sudo mkdir info      apt-get --reinstall install udev m ...

  8. win8 开启administrator 管理员帐户

    进入命令提示符以后,输入命令:[net user administrator /active:yes]然后注销,就可以使用administrator登录.. 如果想要取消administrator激活 ...

  9. Hdu 1059 Dividing & Zoj 1149 & poj 1014 Dividing(多重背包)

    多重背包模板- #include <stdio.h> #include <string.h> int a[7]; int f[100005]; int v, k; void Z ...

  10. Android中ListView同过自定义布局并使用SimpleAdapter的方式实现数据的绑定

    1.listview的数据填充可以通过ArrayAdapter,SimpleAdapter,也可以是一个xml文件,但是ArrayAdapter与SimpleAdapter的区别是: 2 ArrayA ...