这个插件使用起来非常简单，首先下载插件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. Android HAL层与Linux Kernel层驱动开发简介

    近日稍微对Android中的驱动开发做了一些简要的了解. HAL:Hardware Abstract Layer 硬件抽象层,由于Linux Kernel需要遵循GPL开源协议,硬件厂商为了保护自己硬 ...

  2. POJ2387(最短路入门)

    Til the Cows Come Home Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 38556   Accepted ...

  3. Jasper：SAOP API 函数

    ylbtech-Jasper:SAOP API 函数 1.设备API返回顶部 1. 设备 设备 API 可以访问详细的设备(SIM 卡)信息,包括当前会话.您也可以更改属性值. API 调用 描述 A ...

  4. chromium浏览器开发系列第五篇：Debugging with WinDBG

    Windbg 相信windows开发的人都知道,有些人用的溜儿溜儿的,有个crash,直接拿这个工具一分析,就定位出来了.非常好用.以前有个同事,做sdk开发 的,会各种命令.来北京后,还去过微软面试 ...

  5. [hdu2087]剪花布条(KMP)

    题意:求存在模式串个数,不可重复. 解题关键:模板题.整理模板用.重复和不可重复的区别在下面已标出.主要是j的变化. #include<cstdio> #include<cstrin ...

  6. git for eclipse 如何取消误操作的忽略（ignore）操作

    直接删除ignore文件即可.如下显示: 原文引用:https://blog.csdn.net/exceptionss/article/details/79082601

  7. 一步步实现 Prism + MEF（二）--- 绑定命令

    Prism程序集为我们提供了DelegateCommand命令,使用该命令可实现窗口直接绑定.第一步:在ViewModel中定义一个DelegateCommand属性. public Delegate ...

  8. 12. nc/netcat 用法举例

    nc命令用法举例 什么是nc nc是netcat的简写,有着网络界的瑞士军刀美誉.因为它短小精悍.功能实用,被设计为一个简单.可靠的网络工具 nc的作用 (1)实现任意TCP/UDP端口的侦听,nc可 ...

  9. 51nod1117【贪心】

    思路:哈夫曼树~~哇塞,那么有道理. 利用堆维护:每次从堆里取两个最小加起来,然后还是最小的两个,最后只剩一根总的 #include <bits/stdc++.h> using names ...

  10. Codeforces86D【莫队算法】

    题意: 给一个序列和一些区间,每次询问对区间所有不同的数,求每个不同的出现的个数的平方*其值的总和 2*2*1+1*1*2 思路: 裸的莫队算法. 补: 1.cmp写错. 2.LL运算不会进行转化. ...