码迷,mamicode.com
首页 > 其他好文 > 详细

滚动条美化插件 nicescroll

时间:2018-10-13 16:51:41      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:border   html   title   rom   font   box   type   utf-8   oct   

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

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

然后在页面中需要修改滚动条的地方,例如idboxdiv

<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

标签:border   html   title   rom   font   box   type   utf-8   oct   

原文地址:https://www.cnblogs.com/hzhjxx/p/9783272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!