滚动条美化插件jquery.nicescroll

浏览: 368次 日期:2018年07月21日 20:10:18 作者:青格勒

今天给大家介绍一个滚动条美化插件jquery.nicescroll,这个插件有以下一个主意事项:

1、兼容所有最新的桌面浏览器和旧版:Chrome,Firefox,Edge,IE8 +,Safari(win / mac),Opera

2、兼容移动设备:iPad / iPhone / iPod,Android 4 +,Blackberry手机和Playbook(WebWorks / Table OS),Windows Phone 8和10

3、兼容所有触摸设备:iPad,Android平板电脑,Window Surface

4、基于jQuery 1.x / 2.x / 3.x分支使用

5、下载地址:www.npmjs.com/package/jquery.nicescroll

6、代码需要放在

$(function() {});

里面。

 

一、引入相应的插件

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>

 

二、写好你的容器

<div id="divs" style="height: 150px; width:150px; overflow:hidden; border: 5px solid #000000;">
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
    <p>CGLweb前端博客</p>
    <p>青格勒前端博客</p>
</div>

 

三、写你的js代码

<script type="text/javascript">
    $(function() {
        $("#divs").niceScroll({cursorcolor:"#f80516"});
    });
</script>

 

四、然后你就可以看到一个美化过的滚动条了

 

 

 

当然这个插件还有很多的用法和api的。

用法可以在官网查看,下面我就用我18级英语给你们简单的翻译一下吧:

一、用法

1、简单模式

$(function() {
    $("body").niceScroll();
});

 

2、返回对象

var nice = false;
$(function() {
    nice = $("body").niceScroll();
});

 

3、设置参数

$(function() {
   $("#divs").niceScroll({
       cursorcolor:"#f80516",
       cursorwidth:'10px'
   });
});

 

4、定义被嵌套的容器

$(function() {
    $("#divs").niceScroll("#divs2",{cursorcolor:"#00F"});
});

 

5、获取滚动的对象

var nice = $("#mydiv").getNiceScroll();

console.log一下就知道了

 

6、隐藏滚动条

用这个之前必须设置滚动的参数,下面的代码知识隐藏了滚动条而已。

$("#divs").getNiceScroll().hide();

 

7、检查滚动条调整大小(内容或位置发生变化时)

$("#mydiv").getNiceScroll().resize();

我试验了一下,这个需要放在你的触发器里面,每次触发内容的时候执行一次就可以,他是不会自己执行的。

 

8、滚动条位置设置

$("#divs").getNiceScroll(0).doScrollLeft(x, duration); //X
$("#divs").getNiceScroll(0).doScrollTop(y, duration); //Y

 

下面就介绍一下API吧:

$("#divs").niceScroll({
    cursorcolor: "#424242", //光标颜色的十六进制
    cursoropacitymin: 0, //当光标处于非活动状态时更改不透明度,范围从1到0
    cursoropacitymax: 1, //当光标处于活动状态时改变不透明度(scrollabar“可见”状态),范围从1到0
    cursorwidth: "5px", //滚动条宽度
    cursorborder: "1px solid #fff", //滚动条边框的css定义
    cursorborderradius: "5px", //滚动条的border-radius
    zindex: "auto" | [number], //滚动条div的z-index
    scrollspeed: 60, //滚动速度
    mousescrollstep: 40, //用鼠标滚轮滚动速度(像素)
    emulatetouch: false, //启用光标拖动滚动,就像桌面计算机中的触摸设备一样
    hwacceleration: true, //支持时使用硬件加速滚动
    boxzoom: false, //为框内容启用缩放
    dblclickzoom: true, //(仅当boxzoom = true时)双击框时激活缩放
    gesturezoom: true, //(仅当boxzoom = true且带有触摸设备时)放大/放入框时激活缩放
    grabcursorenabled: true, //(仅当touchbehavior = true时)显示“抓取”图标
    autohidemode: true, //true没有滚动时隐藏、"cursor"只隐藏光标、false不要隐藏、"leave"仅在指针离开内容时隐藏、"hidden"总是隐藏、"scroll"仅在滚动时显示
    background: "#000", //滚动条背景轨道背景色
    iframeautoresize: true, //在加载事件上自动调整iframe
    cursorminheight: 32, //设置最小滚动条高度
    preservenativescrolling: true, //您可以使用鼠标,冒泡鼠标滚轮事件滚动本机可滚动区域
    railoffset: false, //您可以为轨道位置添加偏移顶部/左侧
    bouncescroll: false, //(仅限hw accell)启用内容末尾的滚动弹跳,类似于移动设备
    spacebarenabled: true, //按空格键时 启用向下滚动页面
    railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, //为轨道填充
    disableoutline: true, //对于chrome浏览器,在使用nicescroll选择div时禁用大纲(橙色突出显示)
    horizrailenabled: true, //水平滚动
    railalign: right, //垂直轨道的对齐
    railvalign: bottom, //水平轨道的对齐
    enabletranslate3d: true, //使用css translate来滚动内容
    enablemousewheel: true, //鼠标滚轮事件
    enablekeyboard: true, //键盘事件
    smoothscroll: true, //轻松移动滚动
    sensitiverail: true, //点击轨道滚动
    enablemouselockapi: true, //可以使用鼠标标题锁API(对象拖动时出现同样的问题)
    cursorfixedheight: false, //像素中的光标设置固定高度
    hidecursordelay: 400, //设置延迟(以微秒为单位)淡出滚动条
    directionlockdeadzone: 6, //用于方向锁定激活的死区(以像素为单位)
    nativeparentscrolling: true, //检测内容的底部并让父卷轴滚动,就像本机滚动一样
    enablescrollonselection: true, //在选择文本时启用内容的自动滚动
    cursordragspeed: 0.3, //用光标拖动时的选择速度
    rtlmode: "auto", //水平div滚动从左侧开始
    cursordragontouch: false, //也可以在touch / touchbehavior模式下拖动光标
    oneaxismousemode: "auto", //允许水平滚动鼠标滚轮仅限水平内容,如果为false(仅垂直)鼠标滚轮不水平滚动,如果值为自动检测双轴鼠标
    scriptpath: "" //为boxmode图标定义自定义路径
    preventmultitouchscrolling: true, //阻止在多点触控事件上滚动
    disablemutationobserver: false, //强制MutationObserver被禁用
    enableobserver: true, //启用DOM更改观察者,它尝试在父或内容div更改时调整大小/隐藏/显示
    scrollbarid: false //为nicescroll栏设置自定义ID 
});

 

文章链接:http://cenggel.com/chajian/136.html

版权声明:文章《滚动条美化插件jquery.nicescroll》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注