Graent.Hu 的博客

新浪微薄腾讯微薄

最新碎语:最近感觉有些迷茫,怎么办~

您的位置:Graent.Hu 的博客 >素材下载> 一款不错的滚动条美化插件(jquery Custom Scrollbar)

一款不错的滚动条美化插件(jquery Custom Scrollbar)

先看一下效果:
QQ截图20160811131407.png
QQ截图20160811131502.png
QQ截图20160811131525.png
QQ截图20160811131608.png
QQ截图20160811131637.png


简单使用:

引用资源:

<link rel="stylesheet" href="../jquery.mCustomScrollbar.css">
<script src="../jquery.mCustomScrollbar.concat.min.js"></script>
 需要美化的元素:


<div id="demo">
		<section id="examples">
			
			<!-- content -->
			<div class="content mCustomScrollbar">
				<h2>Ajax example</h2>
				<hr />
				<p><a href="ajax.html" rel="load-content">Load content via ajax</a></p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
				<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> 
				<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> 
				<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
				
				
				<hr />
				<p>End of content.</p>
			</div>
			
		</section>
	</div>
  JS代码:


(function($){
			$(window).on("load",function(){
				
				$("a[rel='load-content']").click(function(e){
					e.preventDefault();
					var url=$(this).attr("href");
					$.get(url,function(data){
						$(".content .mCSB_container").append(data); //load new content inside .mCSB_container
						//scroll-to appended content 
						$(".content").mCustomScrollbar("scrollTo","h2:last");
					});
				});
				
				$(".content").delegate("a[href='top']","click",function(e){
					e.preventDefault();
					$(".content").mCustomScrollbar("scrollTo",$(this).attr("href"));
				});
				
			});
		})(jQuery);


效果:

QQ截图20160811131407.png


演示:点此查看演示

下载:点此下载滚动条美化插件

我的微信:graent_hu

欢迎扫码加我和微信好友,有什么问题我们可以一起探讨,有什么需要也随时欢迎发消息给我~

转载请注明出处:

本文标题:一款不错的滚动条美化插件(jquery Custom Scrollbar)

本文链接:https://www.wlyc.cn/post-38.html

发表评论

路人甲 表情
看不清楚?点图切换