码迷,mamicode.com
首页 > Web开发 > 详细

jQuery自定义滚动条插件mCustomScrollbar

时间:2016-05-04 22:47:57      阅读:494      评论:0      收藏:0      [点我收藏+]

标签:

写项目的时候遇到了这种情况

技术分享

我用了两个iframe,左边是一个菜单栏,可以展开也可以收回去的。就说这个滚动条太丑了,是浏览器默认的,所以学着用mCustomScrollbar来解决一下这个问题。

1:资源下载

  https://github.com/malihu/malihu-custom-scrollbar-plugin,我是从这里下载的。

2:引入

  注意顺序。

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

3:加载

  我是对accordion进行了这个操作。

    <script type="text/javascript">
        (function($){
                $(window).load(function(){
                    $(".accordion").mCustomScrollbar();
                });
            })(jQuery);
    </script>

4:修改accordion的样式

        .accordion{
            overflow:auto;
            height: 500px;    
        }

5:效果展示

  出错了,错误是有一个js文件没找到,没关系,找到刚才下载的文件,把下面说没找到的js文件拷贝到项目的目录中。问题解决。

  技术分享

然后 可以看到有一个竖线,这个就是新的滚动条。当然 是可以自定义的,这里就不展示了。

  技术分享

jQuery自定义滚动条插件mCustomScrollbar

标签:

原文地址:http://www.cnblogs.com/zhao307/p/5459912.html

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