首先,页面头部引入滚动条插件所需的js和css:
<link href="scroll/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"> <script src="scroll/jquery-2.1.0.min.js"></script> <script src="scroll/jquery.mCustomScrollbar.concat.min.js"></script>
然后,在你所需滚动条的div上增加一class属性:
<div class="content"> 这里是一屏显示不了的相当多的内容 <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat...</p> <p>Aliquam erat volutpat. Sed urna arcu, .........</p> </div>
页面样式:
<style> body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;} .content{margin:40px; width:260px; height:500px; padding:20px; overflow:hidden; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;} .content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;} .content p:nth-child(3n+0){color:#c96;} </style>
最后,调用mCustomScrollbar:
(function($){ $(window).load(function(){ $(".content").mCustomScrollbar(); }); })(jQuery);
你可以在jquery.mCustomScrollbar.css这个样式文件里更改你所需要的滚动条样式。
效果大概如下图:
相关推荐
jquery.mCustomScrollbar自定义滚动条插件,包含官方源码,源码中包含DEMO,包含简单本地DEMO,即拿即用
实现了自定义美化滚动条jquery插件,主要用了jquery滚动条插件jquery.mCustomScrollbar.js,原下载地址:http://www.jq-school.com/Detail.aspx?id=348
1.引用js和css <link href="jquery.mCustomScrollbar.css" rel=...2.给DOM元素添加滚动条: $(".scrollbar").mCustomScrollbar(); 3.设置横向滑动 $(".scrollbar").mCustomScrollbar({ horizontalSc })
jquery.mCustomScrollbar,一款很友好的滚动条jQuery插件。废话不多说,明白的老铁自然知道怎么用。
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标...
malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件,这篇文章主要介绍了webpack里使用jquery.mCustomScrollbar插件的方法,感兴趣的小伙伴们可以参考一下
支持移动端的jQuery滑动条拖动横向图片滚动特效,基于jQuery插件mCustomScrollbar实现,支持定义向支持手动端响应式布局。
jquery.mCustomScrollbar 是一款非常漂亮的滚动条样式插件,同过它你可以自由的定制自己喜欢的滚动条。而且兼容IE6 和IE7等的浏览器
link rel=stylesheet type=text/css href=css/jquery.mCustomScrollbar.css> js引入 [removed][removed] 这里放内容啊啊啊啊这里放内容啊啊啊啊这里放内容啊啊啊啊这里放内容啊啊啊啊。。。。。 [removed] ...
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义