这个插件使用起来非常简单，首先下载插件jquery.nicescroll.min.js

然后在页面中引入jquery，再引入这个插件，

然后在页面中需要修改滚动条的地方，例如id为box的div

<div id="box">

在js中给这个div添加一个方法就可以了：

$("#box").niceScroll();

具体参数，可以查看插件的api文档：

实例代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			.box {

				width: 500px;

				height: 500px;

				margin: 0 auto;

				border: 1px solid blue;

				overflow-y: scroll;

			}

			.box div {

				height: 1000px;

			}

		</style>

		<script src="../../lib/jquery-3.2.1.min.js"></script>

		<script src="../../lib/jquery.nicescroll.min.js"></script>

		<script>

			$(function() {

				$("#box").niceScroll({

					cursorcolor: "#ff0000"

				});

			});

		</script>

	</head>

	<body>

		<div class="box" id="box">

			<div></div>

		</div>

	</body>

</html>

效果为：

滚动条美化插件 nicescroll的更多相关文章

  1. mcustomscrollbar滚动条美化插件

    mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...

  2. scrollBot滚动条美化，niceScroll有滚动条错位得问题

    http://www.htmleaf.com/Demo/201706204585.html

  3. jq滚动条美化

    https://github.com/inuyaksa/jquery.nicescroll(插件地址) https://blog.csdn.net/zyy_0725/article/details/8 ...

  4. 代码高亮美化插件-----SyntaxHighlighter

    IT类文章博客,代码高亮美化插件-----SyntaxHighlighter 最近在做一个类似个人博客的网站,因为文章中会用到各种代码,主要是Javascript,CSS,PHP,XML等.这些代码如 ...

  5. webkit之滚动条美化

    由于公司的产品改用webkit内核,在写公共css的时候,不想使用插件模拟,顺便网上查阅了下css3的滚动条美化. 首先,先上一副示意图. 从网络上盗图的(来源 http://zhangyaochun ...

  6. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

  7. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  8. JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...

  9. NSIS：简单按钮美化插件SkinButton，支持透明PNG图片。

    原文 NSIS:简单按钮美化插件SkinButton,支持透明PNG图片. 征得作者贾可的同意,特发布按钮美化插件SkinButton. 插件说明: 使用GDI+库写的一个简单按钮美化插件,支持透明P ...

随机推荐

  1. codevs 3049 舞蹈家怀特先生

    题目描述 Description 怀特先生是一个大胖子.他很喜欢玩跳舞机(Dance Dance Revolution, DDR),甚至希望有一天人家会脚踏“舞蹈家怀特先生”.可惜现在他的动作根本不能 ...

  2. zabbix3.2部署

    原地址   http://blog.csdn.net/zk673820543/article/details/50680333 CentOS6.7zabbix3.0.0 1.基础软件包安装,采用yum ...

  3. xml解析中的sax解析

    title: xml解析中的sax解析 tags: grammar_cjkRuby: true --- SAXPasser 类: parser(File file, DefaultHandler ha ...

  4. Nuget-QRCode：QRCoder

    ylbtech-Nuget-QRCode:QRCoder 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://github.com/codebu ...

  5. request实现请求转发

    ServletContext可以实现请求转发,request也可以. 在forward之前输入到response缓冲区中的数据,如果已经被发送到了客户端,forward将失败,抛出异常 在forwar ...

  6. fragment getActivity()空指针

    Fragment弹出toast,时不时出现getActivity()空指针,具体原因未查到. 解决办法: if (null == fragment || !fragment.isAdded()) { ...

  7. raid0和raid5的 实验过程

    raid:独立的磁盘冗余阵列 创建raid0: 环境准备:准备三块大小相同的磁盘或分区,此处要特别注意:红色字体 [root@localhost6 home]#fdisk /dev/sdd ##对/d ...

  8. Eclipse常用配置(1)

    1.代码自动提示 在我们忘记方法名或者想偷懒时,代码自动提示很管用.不过Eclipse默认是输入"."后才会出现包或类成员的提示,也就意味着我们必须先输入一个完整的类名,提示才能出 ...

  9. complexType

    //decltype的表达式如果是加上括号的变量,结果将是引用 decltype((variable)) ruiy; //此变量的数据类型是引用(但此处变量的申明语句是错误的,引用不是对象,指向的对象 ...

  10. Teams Formation

    题意: 给定一长度为 n 的整数序列 $a$,将其复制m次,并接成一条链,每相邻K个相同的整数会消除,然后其他的整数继续结成一条链,直到不能消除为止,求问最终剩余多少个整数. 解法: 首先将长度为n的 ...