这个插件使用起来非常简单，首先下载插件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. 【Lintcode】087.Remove Node in Binary Search Tree

    题目: Given a root of Binary Search Tree with unique value for each node. Remove the node with given v ...

  2. 创建自己的YUM仓库

    1. 首先,假定我们应用的名字叫helloworld(可以参考简单 RPM 包制作来创建两个版本helloworld安装RPM包,helloworld-1.0.0-1.el6.x86_64.rpm和h ...

  3. 国标28181sip开源库介绍（陆续补充完备）

    (1)osip一个基于 osip 库的 UAC 和 UAS 的代码整理http://blog.csdn.net/aflyeaglenku/article/details/51601270(2)pjsi ...

  4. MD04

    MD04执行MRP分析后, 将计划订单转换为采购申请单后,,如图所示 采购申请转为采购订单后,如图所示 采购订单生成后,MMBE查看库存 MIGO进行收货后,如下图 此物料在SO中已经收货,已有库存

  5. OpenType字体与TrueType字体的区别

    TrueType采用几何学中二次B样条曲线及直线来描述字体的外形轮廓,其特点是:TrueType既可以作打印字体,又可以用作屏幕显示:由于它是由指令对字形进行描述,因此它与分辨率无关,输出时总是按照打 ...

  6. QTreeWidget笔记

    1.QTreeWidget继承自QTreeView. 2.头文件:QTreeWidget 3.简单使用: #include "mainwindow.h" #include < ...

  7. [Makefile] 递归编译的Makefile的实现

    转自:http://www.linuxidc.com/Linux/2017-01/139702.htm 最近写了一个递归Makefile,目的是既可以实现子模块的单独编译,也可以不做任何修改就和整个程 ...

  8. HDU - 5950 Recursive sequence（二项式+矩阵合并+矩阵快速幂）

    Recursive sequence Farmer John likes to play mathematics games with his N cows. Recently, they are a ...

  9. JEECMS-新闻内容中遍历批量上传的图片

    [#list content.pictures as p] <li value="${p_index+1}"> <img src="${p.imgPat ...

  10. Pure CSS 的网格布局（比bootstrap小很多且易扩展的css UI）

    (转自百度经验)http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html Pure是一个简单.实用的CSS框架,鉴于目前网上对pur ...