参考博客：http://www.qianxingzhem.com/post-1602.html

接着上篇，另一个使用的例子，使用js来初始化滚动条，并且div中的内容可变化。需要调用相应的方法，

代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jquery版的自定义滚动条</title>

<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">

<!--<link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.min.css">-->

<link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.css">

<style type="text/css">

.content{

    width: 500px;

    margin: 0 auto;

    border: 1px solid #ccc;

    padding: 10px 0 10px 10px;

    height: 300px;

    overflow: auto;

    display: none;

}

.toolbar{

    width: 500px;

    margin: 0 auto;

    margin-top: 20px;

}

/** 覆盖滚动条样式 */

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {

    background-color: #333;

}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{

    background-color: #333;

    background-color: rgba(102,102,102,0.9);

}

.mCSB_inside > .mCSB_container {

    margin-right: 20px;

}

</style>

</head>

<body>

<div class="container">

    <div class="row">

        <h3 class="text-center">详情描述</h3>

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

        <div class="content">

        </div>

        <div class="toolbar">

            <button class="btn btn-default" id="btn_show">点击显示内容</button>

            <button class="btn btn-default" id="btn_append">点击加载内容</button>

            <button class="btn btn-default" id="btn_clear">点击清除内容</button>

        </div>

    </div>

</div>

</body>

<script src="jquery/jquery.min.js"></script>

<script src="bootstrap/bootstrap.min.js"></script>

<script src="jquery/jquery.mCustomScrollbar.concat.min.js"></script>

<script type="text/javascript">

$(function(){

    $(".content").mCustomScrollbar({

        theme:"dark-3",

        scrollbarPosition: 'inside',    //滚动条在内部还是外部

        scrollInertia:100,                //滚动延迟, 0禁用

        //autoDraggerLength:true,        //滚动条长度是否随内容多少而变

        autoHideScrollbar:false,        //自动隐藏滚动条

        horizontalScroll:false,            //是否创建水平滚动条

        scrollButtons:{

            enable: true                 //是否使用上下滚动按钮

        }

    });

    $('#btn_clear').click(function(){

        $('.content .mCSB_container').text('');

    });

    $('#btn_show').click(function(){

        $('.content').show();

    });

    $('#btn_append').click(function(){

        var string = '所谓的甩头。就是虚实举球马上停加碎步。就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向带着这几点疑问看视频吧：1.C防两个人的时候是怎么防的？2.怎么应对女PF的钟头？3.被吸到的时候是怎么保证不倒的？还是就不让敌人吸到你？4.篮板是怎么抢的？ 等分？ 直接秒？';

        for(var i=0; i<3;i++){

            string += string;

        }

        $('.content .mCSB_container').append(string);

        $('.content').mCustomScrollbar('update');

    })

});

</script>

</html>

页面效果：

使用jquery.mCustomScrollbar自定义滚动条（2）的更多相关文章

  1. 使用jquery.mCustomScrollbar自定义滚动条（4）live使用，向未来元素添加滚动条，不实用，了解一下

    .div_box元素是本来没有的,在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面,参数live:on; 点击按钮的时候,进行con ...

  2. 使用jquery.mCustomScrollbar自定义滚动条（3）callback onCreate

    碰到了一个问题,想简洁,所以在页面上使用 <div class="div_box mCustomScrollbar" data-mcs-theme="dark-3& ...

  3. 使用jquery.mCustomScrollbar自定义滚动条（1）

    参考博客:https://blog.csdn.net/cdnight/article/details/41351505 api网址:http://manos.malihu.gr/jquery-cust ...

  4. 基于jQuery的自定义滚动条

    在线演示 本地下载

  5. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  6. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

  7. 自定义滚动条mCustomScrollbar

    mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...

  8. 滚动条mCustomScrollbar自定义

    mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...

  9. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

随机推荐

  1. .Net Core开发环境迁移到Linux

    .Net开发环境迁移到Linux上去 .Net Core发布之前,多年来,.Net程序员的开发环境都在Windows上. 三街第一帅的我,虽然上班的8小时一直在windows上撸C#,但是下班时间一般 ...

  2. if-else练习

    练习1 import java.util.Scanner; public class V{ public static void main(String[] args){ Scanner s=new ...

  3. python----函数与函数式编程

    一. 函数与函数式编程 1. 面向对象编程 (类)class 2.面向过程编程 (过程) def 3.函数式编程 (函数) def (1)  函数的特点:          代码重用:         ...

  4. 安装排错 max file descriptors [4096] for elasticsearch process is too low, increase to at least [65536]

    https://blog.csdn.net/cookzrk/article/details/80179006 转载:https://my.oschina.net/u/2510243/blog/8105 ...

  5. Js 字符串拼接的两种方法

    字符串拼接的两种方法 用数组的方法的好处是:避免变量重新定义.赋值 <!DOCTYPE html> <html lang="en"> <head> ...

  6. js判断输入的字符是否是汉字

    <script type="text/javascript"> var c=prompt("请输入一个字符"); var isNumber = c& ...

  7. LG3187 [HNOI2007]最小矩形覆盖

    题意 题目描述 给定一些点的坐标,要求求能够覆盖所有点的最小面积的矩形,输出所求矩形的面积和四个顶点坐标 输入输出格式 输入格式: 第一行为一个整数n(3<=n<=50000),从第2至第 ...

  8. mongodb集群性能优化

    mongodb集群性能优化 在前面两篇文章,我们介绍了如何去搭建mongodb集群,这篇文章我们将介绍如何去优化mongodb的各项配置,以达到最优的效果. 警告 不做任何的优化,集群搭建完成之后,使 ...

  9. 被卡住的2个问题：1.输入url不执行后台的java方法 2.改了jsp页面，再次请求还是以前的那个页面

    1.问题 一个子项目,它的java代码都是打包到磁盘这个文件夹  D://commlib java代码改了之后,也是打包到这个文件夹里,刷新就可看见改了的. 要想子项目能运行,必须在主项目中从/com ...

  10. 下载并安装oracle 11g客户端

    之所以一直没安装成功是因为找不到安装程序,找到的那些要么没有安装程序,要么安装时出错或者安装后用不了,反正一大堆问题 先给个oracle客户端的下载链接 https://pan.baidu.com/s ...