滚动条美化插件 nicescroll

最新推荐文章于 2024-04-16 09:36:22 发布

weixin_33795743

最新推荐文章于 2024-04-16 09:36:22 发布

阅读量111

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hzhjxx/p/9783272.html

版权

这个插件使用起来非常简单，首先下载插件jquery.nicescroll.min.js

然后在页面中引入jquery，再引入这个插件，

然后在页面中需要修改滚动条的地方，例如id为box的div

在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>

效果为：

转载于:https://www.cnblogs.com/hzhjxx/p/9783272.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33795743

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动条美化插件 nicescroll

这个插件使用起来非常简单，首先下载插件jquery.nicescroll.min.js然后在页面中引入jquery，再引入这个插件，然后在页面中需要修改滚动条的地方，例如id为box的div<div id="box">在js中给这个div添加一个方法就可以了：$("#box").niceScroll();具体参数，可以查看插件的api文档：实例...
复制链接

扫一扫