jQuery - 滚动条插件 NiceScroll 使用详解(滚动条美化)
有时为了保持页面风格的统一,我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式,但这种方式不支持老版本的浏览器。而且不同的浏览器下,CSS 滚动条属性的写法也不一样,如果各个浏览器都需要兼容(特别是移动设备的浏览器),那就十分麻烦了。
这里推荐一个十分好用的滚动条插件:Nicescroll
一、NiceScroll 介绍
NiceScroll 是一款完全基于 jQuery 框架的滚动条插件,它不仅有着类似 iOS 系统设备的滚动条外观,而且还支持任意的 <div>、<iframe>、<body> 元素的滚动效果。
1,GitHub 主页
- https://github.com/inuyaksa/jquery.nicescroll
2,功能特点
- 不需要增加额外的 CSS。
- 几乎全浏览器兼容:Chrome、Firefox、Edge、IE8+、Safari、Opera
- 实现只需要一段代码,侵入性非常小。
- 样式可完全自定义。
- 支持触摸事件,可在触摸屏上使用。
3,配置说明
(1)页面中引入 jquery.js
(2)页面中引入 jquery.nicescroll.js
(3)如果需要用到全屏放大功能的话,还要把 zoomico.png 复制到与 jquery.nicescroll.js 同一个文件夹下。
二、基本用法
1,最简单的用法
(1)我们只需在页面初始化完毕后,对需要使用这个滚动条插件的元素调用 niceScroll() 方法即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
(2)这里我直接是让整个页面使用 NiceScroll 插件,默认情况下滚动条是自动隐藏的,即内容如果超出窗口时滚动条也不会显示。(当然此时通过鼠标滚轮还是可以滚动页面的)
(3)当鼠标移到窗口右侧时,滚动条则会显示出来。我们可以拖动它进行页面滚动。
2,返回滚动条对象
1 2 3 4 |
|
3,使用容器“wrapper”包含DIV
这种方式由两个 DIV 组成,前一个为 vieport,后一个为里面内容。
1 |
|
如果遇到加载数据的时候 nicescroll 滚动条闪烁,还有对绝对定位的元素(例如下拉框)使用滚动条,特别是在需要滚动条比较多的页面,导致位置错乱的等问题。那么需要使用这个方法对设置滚动条的元素的直接子元素进行设置,比如:
$("#viewportdiv").niceScroll("#wrapperdiv",{
'cursorcolor':'#686868',
'cursorborder':'none',
'smoothscroll': 'false',
'autohidemode':false
});
4,隐藏滚动条
注意:这个只是把滚动条隐藏,使用鼠标滚轮仍然可以进行滚动。
1 |
|
5,重置滚动条大小
1 |
|
6,滚动到某个指定位置
1 2 3 4 5 |
|
7,删除滚动条
1 |
cursorborder:"",//不需要border cursorcolor:"#C1C1C1",//滚动条颜色 boxzoom:false,//禁止放大box的内容 autohidemode:false,//禁止隐藏 horizrailenabled:false //水平方向禁用 }); |
三、常用配置参数
在调用 niceScroll() 方法初始化滚动条时,我们可以传入一些参数属性,从而对滚动条的样式以及行为进行修改。
1,简单的样式修改
(1)这里我们对滚动条的颜色和触摸滚动模式进行的修改。
1 2 3 4 5 6 7 8 |
|
(2)效果图
2,全屏放大显示
(1)要开启全屏放大功能,只需把 boxzoom 参数设置为 true。(同时记得把 zoomico.png 放到与 jquery.nicescroll.js 同一个文件夹下)
1 2 3 |
|
(2)当我们将鼠标移到滚动区域右侧时,在滚动条旁边会显示出一个“放大”图标。点击后该区域会自动放大占满整个浏览器窗口。
(3)而当这个区域放大后,右上角的这个图标又会变成“缩小”图标,点击后该区域则又还原回原来的位置和尺寸。
3,完整的配置参数表
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
|
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1931.html
转载于:http://www.hangge.com/blog/cache/detail_1931.html
jQuery - 滚动条插件 NiceScroll 使用详解(滚动条美化)相关推荐
- html中字段是日期控件,jQuery日历插件datepicker用法详解
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端, ...
- fancybox ajax参数,jQuery Fancybox插件使用参数详解
今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...
- jquery日历插件daterangepicker全面详解汇总
引入插件库 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script ...
- jquery.uploadify php,jquery插件uploadify使用详解
这次给大家带来jquery插件uploadify使用详解,jquery插件uploadify使用的注意事项有哪些,下面就是实战案例,一起来看一下. 有时项目中需要一个文件批量上传功能时,个人认为upl ...
- PPT中实现长图片滚动条显示!(详解)
PPT中实现长图片滚动条显示!(详解) 1.环境是ppt2010 2.点击开发工具. 3.如果没有开发工具 4.在属性里设置.
- $.ajax的async参数,jquery的$.ajax async使用详解
async在jquery ajax中是一个同步参数了,我们下面来给大家介绍在jquery ajax中使用async时碰到的一些问题与方法介绍,希望例子能给各位同学带来一些帮助哦. async默认是tr ...
- 移动端JQ插件hammer使用详解
** 移动端JQ插件hammer使用详解 ** 用法: 1,首先引入jq2.0以上版本和jquery.hammer.js. 2,获取元素,和jq一样,在后面加上hammer就可以了 var hamme ...
- python做插件应用_Python插件机制实现详解
插件机制是代码/功能反向依赖注入到主体程序的一种方法,编译型语言通过动态加载动态库实现插件.对于Python这样的脚本语言,实现插件机制更简单. 机制 Python的__import__方法可以动态地 ...
- python插件使用教程_Python插件机制实现详解
插件机制是代码/功能反向依赖注入到主体程序的一种方法,编译型语言通过动态加载动态库实现插件.对于Python这样的脚本语言,实现插件机制更简单. 机制 Python的__import__方法可以动态地 ...
- python加载机制_Python插件机制实现详解
插件机制是代码/功能反向依赖注入到主体程序的一种方法,编译型语言通过动态加载动态库实现插件.对于Python这样的脚本语言,实现插件机制更简单. 机制 Python的__import__方法可以动态地 ...
最新文章
- 手动部署OpenStack环境(二:CentOS6.6虚拟机的安装及配置)
- 卷积神经网络(CNN)简介
- 一份非常详尽的 Objective-C 到 Swift 的迁移指南
- 好久不见(致win7)
- 【技巧总结】Penetration Test Engineer[2]-Information gathering
- Spring4.0学习笔记(3) —— Spring_Bean之间的关系
- 网盘运营太难了!百度网盘因“用户激励计划”起风波并致歉
- python selenium中文文档-selenium-python中文版文档
- oracle运维dba面试题,一份DBA面试题目---亲身经历
- 第三季-第20课-多线程程序设计
- linux系统中看视频,怎么在linux里看视频啊?
- 台式计算机m.2的参数,【联想启天 M参数】联想启天 M系列台式电脑参数-ZOL中关村在线...
- matlab命令打开Word文档
- python去除图片背景_Python 图片去除背景
- vue3 + uni-app 封装音乐播放插件
- 物联卡中心:物联卡能永久使用吗?放手机会不会被封卡
- php挂载webdav,phpweb服务器开启了WebDAV的关闭方法
- 群发短信 发短信(带图片)
- c语言数学语文英语成绩编程,输入10名学生的序号和每个学生三门功课(数学、英语、C语言程序设计)的成绩,编程计算出每个学生的总分...
- FreeRTOS记录(八、用软件定时器?还是硬件定时器?)
热门文章
- PLSQL 11破解码
- 分治法--线性时间选择(求第k小数)
- python代码模拟 手写字体
- matlab中dfft,2-DFFT 
该实验的目的是开发一个 2-D FFT程序包 联合开发网 - pudn.com
- 如何委婉地拒绝公司的offer?
- Windows/Ubuntu 使用小技巧记录
- HeadFirst设计模式-命令模式
- 保证速度与心情——pdg转pdf与djvu转pdf大法(不像网上的好多方法那样麻烦,方便快捷,纯傻瓜化操作!)
- 如何查看java安装成功_如何查看java是否安装成功
- java开发的程序怎么用_java安装后怎么使用?第一次编写java程序