jQuery自定义内容滚动条插件详解编程语言

使用方法:

首先下载插件:http://manos.malihu.gr/jquery-custom-content-scroller/

一、HTML

引入以下文件

<link rel="stylesheet" href="/jquery.mCustomScrollbar.css" /> 
<script type="text/javascript" src="js/jquery-1.11.0.min.js">
</script> <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>

二、CSS

首先必须要有滚动条出现,给DIV限定高度,并指定overflow样式为auto,

这样当内容超出后就会自动出现滚动条了

<style> 
  .div-height { width: 300px; height: 300px; overflow: auto; 
  } </style>

三、初始化HTML

<div class="content" data-mcs-theme="dark"> 
   <!-- your content --> </div>

四、初始化JS

<script> 
    $(function(){ 
     $(".content").mCustomScrollbar(); 
    }) 
</script>

效果演示:jquery_scroller

官网:http://manos.malihu.gr/jquery-custom-content-scroller/

转自:blog.ytso.com

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/11219.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论