jquery.nicescroll.min.js滚动条使用方法

JavaScript014

jquery.nicescroll.min.js滚动条使用方法,第1张

(摘自博客园,原网址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)

window.onmousewheel = function(){  //触发滚轮事件

}

window.onscroll = function(){  //滚动条事件

}

//其实你的问题直接使用判断滚动条应该就可以了,但是如果一定要拖动滚动条才执行事件,我们可以通过获取鼠标位置来模拟

var a = document.getElementsByTagName("html")[0]

window.onmousemove = function(){

        //一般默认滚动条12px宽,当鼠标位于浏览器窗口右边12px内按下鼠标可以视为拖动滚动条

if(innerWidth - event.clientX < 12){

a.onmousedown = function(){

console.log(1)

}

}else{

a.onmousedown = null

}

}

1 .scroll事件在滚动条滚动时被触发

2 . scroll检测的是滚动条的滚动,当滚动条不能滚动(到顶或到底)时,scroll便不再触发

3 .默认滚动不能禁止

4 .scroll事件可以被高频率的触发,事件处理程序不应该执行高性能消耗的操作,推荐的做法是scroll里面的操作使用requestAniamtionFrame()操作

5 .感觉animateJS应该做了这个优化吧

1 .wheel在鼠标滚轮滚动的时候被触发,由于鼠标滚轮时大部分都会触发scroll事件,所以wheel事件先触发

2 .一旦滚动条到底部的时候,滑动鼠标滚轮继续滚动,wheel还是会一直触发,而scroll这时不会触发

3 .可以禁止滚轮滚动

4 .不要将 wheel 事件与[ scroll ]事件混淆。事件的默认操作 wheel 是特定于实现的,不一定调度 scroll 事件。即使是这样,事件 delta* 中的值 wheel 也不一定反映内容的滚动方向。因此,不要依赖 wheel 事件的 delta* 属性来获取滚动方向。相反,检测事件[ scrollLeft ]中[ scrollTop ]目标的值变化。 scroll

5 .中间滚轮按下去的时候.也可以滚动,但是不会触发scroll事件

6 .better-scroll的处理操作,真正和滚动有关的只有wheel事件,没有监听scroll事件.而且他这种操作是会屏蔽中键按下触发滚动的.这种操作不知道屏蔽之后可不可以

7 .mouseWheel是非标准事件,已经被这个事件代替

8 .属性

9 .据滚轮方向(即该事件的各delta属性值)来推断文档内容的滚动方向,因标准未定义滚轮事件具体会引发什么样的行为,引发的行为实际上是各浏览器自行定义的。即便滚轮事件引发了文档内容的滚动行为,也不表示滚轮方向和文档内容的滚动方向一定相同。因而通过该滚轮事件获知文档内容滚动方向的方法并不可靠。需要检查元素的scroll值判断才知道是朝什么方向滚动

10 .他的滚动完全就是用whell自己做

11 .属性

1 .scroll,wheel,mousewheel,DOMMouseScroll

2 .兼容性

[图片上传失败...(image-d0be31-1647574199505)]

1 .需要ref拿到dom操作,这里被普通的接管了,普通的是可以通过e.preventDefaault()阻止了默认的滚动,但是鼠标中间键按下触发的滚动,是无法阻止的,并且不会触发wheel事件,那这里就不行了,所以还是不能用wheel来做这个

2 .