您的位置:首页> 日志> 前端技术 正文
DTOP

自定义网页滚动条样式插件

NoyaHua | 2015年09月11日 |

>>收藏本文 已有 1条评论

最近在输出项目中,有页面对滚动条样式进行了设计。之前考虑到兼容性问题很少用到自定义滚动条样式的。而如今使用默认的滚动条样式显然已经不适合大众审美观了。为了能够实现这一效果,找到了一个jQuery插件感觉挺好用的,今天进简单介绍下 mCustomScrollbar插件。

官网地址:http://manos.malihu.gr/jquery-custom-content-scroller/
   点击这里可以下载相关案例:
https://github.com/malihu/malihu-custom-scrollbar-plugin/releases

如何使用 mCustomScrollbar

第一步、首先,先请你下载作者提供的插件包,里面包含了所有的插件文件和一些例子。其中我们需要的文件有:jquery.mousewheel.min.js  query.mCustomScrollbar.js  
jquery.mCustomScrollbar.css 。

 

第二步、加载插件的样式文件以及所需要的js文件。
引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。在css样式表中,可以根据我们的效果图来定义滚动条。加载必须的 JS 文件。 jquery.mousewheel.min.js 是用来提供滚动支持的,jquery.mCustomScrollbar.js 则是插件的主文件。

 

  1. <link href="../skin/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
  2. <script src="../skin/js/jquery.mousewheel.min.js"></script>
  3. <script src="../skin/js/jquery.mCustomScrollbar.js"></script>

 

第三步、对 内容块 激活这个插件

  1. <script>
  2.     (function($){
  3.         $(document).ready(function(){
  4.             $(".content").mCustomScrollbar();
  5.         });
  6.     })(jQuery);
  7. </script>
     

第四步、对页面中需要使用滚动条的内部区域进行样式定义。

  1.  .content {height: 530px;  overflow: hidden;}

自定义滚动条样式,当内容高度超过时,才会出现滚动条。完成上述操作之后,基本上就能出现自定义的滚动条了。滚动条样式根据自己需要在jquery.mCustomScrollbar.css进行调整。

根据这个插件输出好的页面


 

转载 jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法