新手向一个超简单的jquerymCustomScrollbar滚动条插件Demo

31次阅读

共计 1389 个字符,预计需要花费 4 分钟才能阅读完成。

废话不多说,直接上代码。

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
<link href="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet">
<style>
    .content {
        width: 240px;
        height: 400px;
    }
</style>
<div class="content">
    <p>
        关于 SegmentFault
        杭州堆栈科技有限公司创立于 2012 年,旗下拥有 SegmentFault 中文技术交流平台,在这里你可以检索,交流和分享任何技术编程相关的问题及知识。我们的目标是覆盖和服务
        1,000 万以上中国软件开发者和 IT 信息从业者,其实现方法是充分利用在各个平台上所能获
        得的各种技术创新机会为他们开发产品应用和服务。SegmentFault 的文化
        精益和敏捷、简单和价值是我们的文化核心,也是我们的核心价值观 SegmentFault 团队由 20 多位
        独特且富有才华的成员组成,致力于为数百万开发者和程序员提供产品和服务。SegmentFault 将黑客马拉松活动引入中国
        至今,已经在国内一线互联网城市以及台北、新加坡、硅谷等地区举办了超过 50 场黑客马拉松。SegmentFault 是目前中国最大的黑客马拉松组织方。媒体报道
        期待更多的媒体朋友能与 SegmentFault 一起共同关注程序员群体和软件开发行业,共同促进行
        业的可持续发展和激发新技术的不断诞生
        SegmentFault、友好速搭、华为、滴滴等成为网易蜂巢首批合作伙伴
        虎嗅
        开发者技术问答社区 SegmentFault 获新一轮 >>1024 万融资
        36 氪
        面向开发者的技术问答社区 SegmentFault 获数百万人民币天使轮融资
        36 氪
        SegmentFault 获得新媒体创业大赛第二名
        虎嗅网
        SegmentFault:瞄准技术宅的互联网社区
        解放日报
        SegmentFault:构建专业的程序员问答网站
        DoNews
    </p>
</div>
<script>
    (function($) {$(window).load(function() {$(".content").mCustomScrollbar({scrollButtons: {enable: true},
            });
        });
    })(jQuery);
</script>

效果大概是这样的:


拖动条条文字上下滚动

看不清?那咱换个主题

<script>
    (function($) {$(window).load(function() {$(".content").mCustomScrollbar({scrollButtons: {enable: true},
                theme: "3d-thick"
            });
        });
    })(jQuery);
</script>

script中加了个 theme: "3d-thick"
效果如图:


是不是能看得清了?

欲知更多 请点击

正文完
 0