滚动条插件 NiceScroll 使用详解

JavaScript016

滚动条插件 NiceScroll 使用详解,第1张

有时为了保持页面风格的统一,我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式,但这种方式不支持老版本的浏览器。而且不同的浏览器下,CSS 滚动条属性的写法也不一样,如果各个浏览器都需要兼容(特别是移动设备的浏览器),那就十分麻烦了。

这里推荐一个十分好用的滚动条插件: Nicescroll

NiceScroll 是一款完全基于 jQuery 框架的滚动条插件,它不仅有着类似 iOS 系统设备的滚动条外观,而且还支持任意的 <div>、<iframe>、<body>元素的滚动效果。

https://github.com/inuyaksa/jquery.nicescroll

(1)页面中引入 jquery.js

(2)页面中引入 jquery.nicescroll.js

(3)如果需要用到全屏放大功能的话,还要把 zoomico.png 复制到与 jquery.nicescroll.js 同一个文件夹下。

(1)我们只需在页面初始化完毕后,对需要使用这个滚动条插件的元素调用 niceScroll() 方法即可。

(2)这里我直接是让整个页面使用 NiceScroll 插件,默认情况下滚动条是自动隐藏的,即内容如果超出窗口时滚动条也不会显示。(当然此时通过鼠标滚轮还是可以滚动页面的)

(3)当鼠标移到窗口右侧时,滚动条则会显示出来。我们可以拖动它进行页面滚动。

这种方式由两个 DIV 组成,前一个为 vieport,后一个为里面内容。

如果遇到加载数据的时候 nicescroll 滚动条闪烁,还有对绝对定位的元素(例如下拉框)使用滚动条,特别是在需要滚动条比较多的页面,导致位置错乱的等问题。那么需要使用这个方法对设置滚动条的元素的直接子元素进行设置,比如:

注意:这个只是把滚动条隐藏,使用鼠标滚轮仍然可以进行滚动。

//水平方向滚动(距左侧100px)

//垂直方向滚动(距上方100px)

三、常用配置参数

在调用 niceScroll() 方法初始化滚动条时,我们可以传入一些参数属性,从而对滚动条的样式以及行为进行修改。

(1)这里我们对滚动条的颜色和触摸滚动模式进行的修改。

(2)效果图

(1)要开启全屏放大功能,只需把 boxzoom 参数设置为 true。(同时记得把 zoomico.png 放到与 jquery.nicescroll.js 同一个文件夹下)

(2)当我们将鼠标移到滚动区域右侧时,在滚动条旁边会显示出一个“放大”图标。点击后该区域会自动放大占满整个浏览器窗口。

(3)而当这个区域放大后,右上角的这个图标又会变成“缩小”图标,点击后该区域则又还原回原来的位置和尺寸。

(摘自博客园,原网址http://www.cnblogs.com/reweb/p/3268775.html)

jquery.nicescroll.min.js滚动条使用方法,Nicescroll是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条。

页面使用:

$("html").niceScroll({

cursorcolor:"#E62020",

cursoropacitymax:1,

touchbehavior:false,

cursorwidth:"10px",

cursorborder:"0",

cursorborderradius:"5px"

})

nicescroll详细参数配置:

cursorcolor - 设置滚动条颜色,默认值是“#000000”

cursoropacitymin - 滚动条透明度最小值

cursoropacitymax - 滚动条透明度最大值

cursorwidth - 滚动条的宽度像素,默认为5(你可以写“5PX”)

cursorborder - CSS定义边框,默认为“1px solid #FFF”

cursorborderradius - 滚动条的边框圆角

ZIndex的 - 改变滚动条的DIV的z-index值,默认值是9999

scrollspeed - 滚动速度,默认值是60

mousescrollstep - 滚动鼠标滚轮的速度,默认值是40(像素)

touchbehavior - 让滚动条能拖动滚动触摸设备默认为false

hwacceleration - 使用硬件加速滚动支持时,默认为true

boxzoom - 使变焦框的内容,默认为false

dblclickzoom - (仅当boxzoom = TRUE)变焦启动时,双点击框,默认为true

gesturezoom - boxzoom = true并使用触摸设备)变焦(仅当激活时,间距/盒,默认为true

grabcursorenabled“抢”图标,显示div的touchbehavior = true时,默认值是true

autohidemode,如何隐藏滚动条的作品,真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏

的背景下,改变铁路背景的CSS,默认值为“”

iframeautoresize中,AUTORESIZE iframe上的load事件(默认:true)

cursorminheight,设置最低滚动条高度(默认值:20)

preservenativescrolling,您可以用鼠标滚动本地滚动的区域,鼓泡鼠标滚轮事件(默认:true)

railoffset,您可以添加抵消顶部/左轨位置(默认:false)

bouncescroll,使滚动反弹结束时的内容移动(仅硬件ACCELL)(默认:FALSE)

spacebarenabled,允许使用空格键滚动(默认:true)

railpadding,设置间距(默认:顶:0,右:0,左:0,底部:0})

disableoutline,Chrome浏览器,禁用纲要(橙色hightlight)时,选择一个div nicescroll(默认:true)