jquery.nicescroll滚动条美化插件

更新日期: 2019-09-15阅读: 2.4k标签: 插件

今天给大家介绍一个滚动条美化插件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 ace
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">
<p></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();

6、隐藏滚动条

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

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

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

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

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

8、滚动条位置设置

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


下面就介绍一下API吧:

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 

链接: https://www.fly63.com/article/detial/5395

对于前端开发,整理推荐好用的chrome插件或应用

向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

typeahead.js_jquery input 搜索自动补全jQuery插件

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

ios风格的时间选择插件

在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

sublime安装插件

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!