Jquery插件Nicescroll 制作滚动条

╰+攻爆jí腚メ 2022-06-13 10:47 355阅读 0赞

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）

页面使用：

引用jquery.js和jquery.nicescroll.js

通过jquery获取需要添加滚动条的元素，调用niceScroll函数进行配置即可使用该插件，如下

$('#content').niceScroll({
        cursorcolor: "#ccc",//#CC0071 光标颜色
        cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
        touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
        cursorwidth: "5px", //像素光标的宽度
        cursorborder: "0", // 游标边框css定义
        cursorborderradius: "5px",//以像素为光标边界半径
        autohidemode: false //是否隐藏滚动条
    });

只需以上两步即可使用，无需css等。

下载地址：点击下载

[官网][Link 1]

[Link 1]: http://areaaperta.com/nicescroll/