这个插件使用起来非常简单，首先下载插件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. 【转】Pro Android学习笔记（一）：Android 平台 2013.6.4

    本系列是阅读<Pro Android4>的读书笔记,也包括网络阅读资料的整理,以及个人心得. 由于智能手机引入AP(应用处理器),Android在某种意义上是个人计算机,具有桌面计算机的完 ...

  2. Unity3d笔记

    当变量重命名后,已序列化保存的值会丢失,如果希望继续保留其数值,可使用FormerlySerializedAs,如下代码所示: [UnityEngine.Serialization.FormerlyS ...

  3. sublime取消自动升级提示

    1.进入Preferences -> Settings-User ,添加 "update_check": false, 2.重启Sublime.

  4. Umbraco back office 登录不了，如何解决

    通过设置User的默认密码为"default", 它的Hash值为 bnWxWyFdCueCcKrqniYK9iAS+7E= 所以在SQL Server中执行以下脚本 UPDATE ...

  5. Unity ShaderLab 光照随笔

    unity camera默认3种渲染路径,unity5.50里面有4种 camera Rendering Path 1 vertexLit(逐顶点,一般在vert中处理)  2 forward (前向 ...

  6. 2017 Fzu校赛 [Cloned]

    A - Salty Fish 海边躺着一排咸鱼,一些有梦想的咸鱼成功翻身(然而没有什么卵用),一些则是继续当咸鱼.一个善良的渔夫想要帮这些咸鱼翻身,但是渔夫比较懒,所以只会从某只咸鱼开始,往一个方向, ...

  7. Java 为程序创建日志系统

    使用JAVA创建日志系统有两种方法 1.使用log4j操作日志文件 2.使用系统重定向输出日志信息 方法1:使用log4j操作日志文件(可使用jar或者xml) 步骤1:下载log4j.jar 下载地 ...

  8. 30岁程序员的焦虑 Anxiety of 30-year-old Programmers

    还有四个月,我就30周岁了.圈里都在传30岁程序员的焦虑,我也焦虑.身边的朋友,除了已经上岸的一部分,说不焦虑的,几乎找不到. 我们不妨认真地来聊一下这个话题:30岁,程序员,焦虑. 首先,什么是焦虑 ...

  9. 第九组 通信3班 063 OSPFv2与OSPFv3综合实验

    实验目的 1. 掌握 OSPFv3(v2) 的配置方法 2. 掌握在帧中继环境下 OSPFv3 (v2)的配置方法 3. 掌握 OSPFv3(v2) NSSA 的配置方法 4. 掌握外部路由汇总的配置 ...

  10. 部署Azure Log Analytics

    Azure Log Analytics功能用于收集并处理Azure资源或部分本地资源的log数据,同时该功能与Azure Alert集成,可以针对搜集到的异常日志给管理人员发起报警. 1.创建Azur ...