这个插件使用起来非常简单，首先下载插件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. Oracle字段增删改方法总结

    一.修改字段的语法:alter table tablename modify (字段名 类型 [default value][null/not null],….);有一个表名为tb,字段段名为name ...

  2. Django简单快速实现PUT、DELETE方法

    使用django的小伙伴们应该都知道我们是无法开心的处理PUT跟DELETE的 $.ajax({ url: 'XXX', type: 'PUT', dataType: 'json', data: { ...

  3. C# 32位程序在64位系统下注册表操作

    在64位的Windows操作系统中,为了兼容32位程序的运行,64位的Windows操作系统采用重定向机制.目的是为了能让32位程序在64位的操作系统不仅能操作关键文件文夹和关键的注册表并且又要避免与 ...

  4. POI 中的CellType类型以及值的对应关系

    操作使用POI接口,了解CellType的类型和值的对应关系. CellType 类型 值 CELL_TYPE_NUMERIC 数值型 0 CELL_TYPE_STRING 字符串型 1 CELL_T ...

  5. Programming With Objective-C---- Introduction ---- Objective-C 学习(一)

    About Objective-C Objective-C is the primary programming language you use when writing software for ...

  6. Hive安装&nbsp;&nbsp;&nbsp;&nbsp;…

    Hive安装 mysql使用主机(win7)上的mysql数据库,启动后,要关闭360和win7自带的防火墙,确保在虚拟机里能拼通主机********************************* ...

  7. VNC协议分析

    VNC协议分析 摘自: http://blog.csdn.net/forever_feng/article/details/4703088 简介 VNC(Virtual Network Computi ...

  8. 用MATLAB进行数据分析

  9. Unicode编码下字符串转换

    VC\MFC当中CString.string.char.char*.char数组.int等类型之间的转换令人晕头转向,特地搜集多篇文章资料,利用代码实例等清晰的理清他们之间的关系和如何转换,其实非常简 ...

  10. vijos1007 绕钉子的长绳子

    P1007绕钉子的长绳子(https://vijos.org/p/1007) 背景 平面上有N个圆柱形的大钉子,半径都为R,所有钉子组成一个凸多边形. 现在你要用一条绳子把这些钉子围起来,绳子直径忽略 ...