这个插件使用起来非常简单，首先下载插件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. 【LeetCode】047. Permutations II

    题目: Given a collection of numbers that might contain duplicates, return all possible unique permutat ...

  2. 数据结构与算法（3）----->队列和栈

    1. 栈和队列的基本性质 栈是先进后出;(像是子弹夹,后进先打出) 队列是先进先出;(像是平时排队买冰淇淋,按顺序轮流) 栈和队列在实现的结构上可以有数组和链表两种形式; (1)数组结构实现容易; ( ...

  3. Redis 客户端安装与远程连接图解

    Linux环境:Centos 6.8 Redis服务端版本:3.2.6 Redis客户端下载链接:https://redisdesktop.com/download 省略Linux系统安装Redis教 ...

  4. AtCoder Regular Contest 070F：Honest Or Unkind

    题目传送门:https://arc070.contest.atcoder.jp/tasks/arc070_d 题目翻译 有\(n\)个人,其中有\(a\)个人是诚实的,另外\(b\)个是不诚实的.你可 ...

  5. Global 全局样式基本设置

    1.  默认字体设置,边距设置 html { font-family: sans-serif; /* 默认字体 */ font-size: 100%; /* 在用户调整窗口大小时,字体大小做相应调整. ...

  6. Spring入门第八课

    看如下代码 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...

  7. POJ - 2377 Bad Cowtractors Kru最大生成树

    Bad Cowtractors Bessie has been hired to build a cheap internet network among Farmer John's N (2 < ...

  8. 网络编程demo之Udp和URL

    首先是udp编程客户端发送消息给服务端,服务端接受然后打印到console控制台上 下面是一个有代表性的demo package com.henu.liulei; import java.io.IOE ...

  9. 2016vr 相关白皮书

    腾讯2016VR技术白皮书:盘点VR前沿技术 http://mt.sohu.com/20170329/n485424234.shtml 工信部<VR产业白皮书>全文 官方解读虚拟现实 ht ...

  10. js的Element.scrollIntoView的学习

    1.Element.scrollIntoView()    该方法让当前元素滚动到浏览器窗口的可是区域内: 2.语法: element.scrollIntoView();//等同于element.sc ...