<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. Install FFmpeg, Mplayer, Mencoder, MP4Box, Flvtool2

    You can use the following tutorial to install ffmpeg and other video modules in your centos server.F ...

  2. 【学习笔记】【oc】copy与mutableCopy

    copy 返回一个不可变的对象: mutableCopy 返回一个可变的对象: 使用copy方法时 类必须实现:<NSCopying>协议中的-(id)copyWithZone:(NSZo ...

  3. BZOJ 2300 防线修建

    http://www.lydsy.com/JudgeOnline/problem.php?id=2300 题意:给点,有以下操作:删去一个点,询问这些点构成凸包的周长. 思路:用splay维护上凸壳, ...

  4. C51的编程规范

    现在单片机的程序设计,C51已经得到广泛的推广和应用,算是单片机的主流设计程序,甚至可以说作为单片机开发人员必须要掌握的一门语言了.作为一门工具,最终的目的就是实现功能.在满足这个前提条件下,我们希望 ...

  5. C51的一些误区和注意事项

    1) C忌讳绝对定位.常看见初学者要求使用_at_,这是一种谬误,把C当作ASM看待了.在C中变量的定位是编译器的事情,初学者只要定义变量和变量的作用域,编译器就把一个固定地址给这个变量.怎么取得这个 ...

  6. android http协议post请求方式

    方式一:HttpPost(import org.apache.http.client.methods.HttpPost 代码如下: private Button button1,button2,but ...

  7. SolrCloud 5.2.1 installation and configuration

    虽然不是很有技术含量的事情,主要依靠的是阅读能力,然而知识的东西还是记录一下,以备后继待查. 环境相关 1. Server:h1,h2,h3 2. OS RHEL 6.2 3. Zookeeper 3 ...

  8. BZOJ3389: [Usaco2004 Dec]Cleaning Shifts安排值班

    3389: [Usaco2004 Dec]Cleaning Shifts安排值班 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 45  Solved:  ...

  9. HDU_2019——向排序好的数列中插入数

    Problem Description 有n(n<=100)个整数,已经按照从小到大顺序排列好,现在另外给一个整数x,请将该数插入到序列中,并使新的序列仍然有序.   Input 输入数据包含多 ...

  10. 51nod-正整数分组问题(基础方程DP-01背包)

    正整数分组 将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的. 思路: 这题的实质其实也是0-1背包问 ...