这个插件使用起来非常简单，首先下载插件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. September Challenge 2017

    Little Chef and Sums 分析:水题,去维护一下前缀和以及后缀和就好,注意long long #include "iostream" #include " ...

  2. windwos 10 谷歌浏览器出现彩色闪条

    应该是上个星期五开始,发现电脑从别的地方切换到谷歌浏览器就会出现闪条,开始也没太注意,但是到周一还是这样,所以再网上查了下, 说什么的都有,什么你按脑屏幕坏了,内存条不行什么是的.后来才发现原来是谷歌 ...

  3. Python之模块介绍

    模块介绍 模块,是用一些代码实现的某个功能的代码集合. 类似与函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用,提供了代码的重用性和代码间的耦合.对于一个复杂的功能,可能需要多个函 ...

  4. 点阵字体显示系列之一：ASCII码字库的显示

    http://blog.csdn.net/subfate/article/details/6444578 起因: 早在阅读tslib源代码时就注意到里面有font_8x8.c和font_8x16.c两 ...

  5. java递归demo---

    递归思想: 递归就是方法里调用自身 在使用递归策略时,必须有一个明确的递归结束条件,称为递归出口 递归算法代码显得很简洁,但递归算法解题的运行效率较低.所以不提倡用递归设计程序. 在递归调用的过程中系 ...

  6. MangoDB篇章（1）

    关系型数据库遵循ACID规则 事务(transaction)4个特性:原子性(A).一致性(C).独立性(I).持久性(D) : 分布式系统(distributed system): 由多台计算机和通 ...

  7. 安装时后的idea，项目不能运行，pom.xml文件不能下载到本地仓库，maven配置是正确的

    安装时后的idea,项目不能运行,pom.xml文件不能下载到本地仓库,maven配置是正确的 项目上传到svn后,同事下载项目后,没有识别出来mavn中的pom.xml文件,导致idea不能自动下载 ...

  8. try-catch-finally中return的执行情况

    在try中没有异常的情况下try.catch.finally的执行顺序 try--- finally 如果try中有异常,执行顺序是try--- catch --- finally 如果try中没有异 ...

  9. 一步步实现 Prism + MEF（一）--- 搭建框架

    第一步:构建一个名为Bootstrapper的类作为引导程序. class Bootstrapper : MefBootstrapper { } 第二步:在MainWindow窗体中添加一个Coont ...

  10. QListWidget笔记

    1.头文件:#include <QListWidget> 2.继承自:QListView 3.基本代码: #include "mainwindow.h" #includ ...