碰到了一个问题，想简洁，所以在页面上使用

<div class="div_box mCustomScrollbar" data-mcs-theme="dark-3">这种方式来初始化滚动条；

然后在$(fucntion(){})里面写div_box中添加内容append函数；

但是发现div_box中没有内容。

经分析是因为先执行了在div_box中append内容，而由于是要在div_box .mCSB_container下面添加内容的，但是这时候滚动条还没有初始化完毕，所以这时候是选取不了div_box .mCSB_container元素的，也就没法append内容了。

所以，先加载滚动条，在滚动条加载完毕的callback里面append内容。下面是例子：

<!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;

    height: 300px;

}

.div_box{

    height: 280px;

    border: 1px solid #ccc;

    overflow: auto;

}

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

/*

.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 class="div_box">

            </div>

        </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(){

     /*

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

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

        string += string;

     }

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

     */

     //为什么上面没有div_box中没有内容呢？因为先执行了$('.content .div_box .mCSB_container')append字符串

     //但是这时候滚动条压根没有加载进来。所以也就选取不到$('.content .div_box .mCSB_container')，所以就看不到任何内容了。

     //所以，手动加载滚动条，在滚动条加载完成事件里面，进行append string

      $('.content .div_box').mCustomScrollbar({

              theme:"dark-3",

              scrollInertia:100,

              scrollButtons:{

                enable: true

            },

            callbacks:{

                onCreate: function(){

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

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

                        string += string;

                     }

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

                }

            }

      });

});

</script>

</html>

效果：

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

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

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

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

    参考博客:http://www.qianxingzhem.com/post-1602.html 接着上篇,另一个使用的例子,使用js来初始化滚动条,并且div中的内容可变化.需要调用相应的方法, 代码 ...

  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. FZU软工第十一次作业-软件产品案例分析

    目录 前言: 第一部分.调研,评测: 1.1.初次感觉: 1.2.企业号bug: 1.3.你觉得为什么这个产品组的人没有发现这些bug: 1.4.假设你们团队需要开发这套系统,需要注意哪些方面: 2. ...

  2. 【UOJ#22】【UR#1】外星人

    2044年,Picks建成了人类第一台基于量子理论的银河系信息传递机. Picks游遍了宇宙,雇用了 n 个外星人来帮他作为信息传递机的中转站.我们将外星人依次编号为 1 到 n,其中 i 号外星人有 ...

  3. 用Git向gitHub上传项目

    用Git向gitHub上传项目 1.安装git 2.在git安装目录下,运行git-bash.exe  如图所示 3.在git中绑定你注册gitHub是的用户名.邮箱. $ git config -- ...

  4. js 三目运算

    语法: 一个条件,二选一: 条件?当条件满足时返回的值:当条件不满足时返回的值 多个条件,多选一: 条件1?条件1满足时的值: 条件2?条件2满足时的值: 条件n ?条件n 满足时的值: 默认值: 以 ...

  5. webpack 搭建问题汇总

    总结一下遇到的问题: 1.这样的警告(The 'mode' option has not been set, webpack will fallback to 'production' for thi ...

  6. (原创) 使用pymongo 3.6.0连接MongoDB的正确姿势

    0.疑惑 前两天使用pymongo连接MongoDB的时候发现了一个奇怪的现象:我本机MongoDB并没有打开,但是使用pymong.MongoClient()进行连接时,并没有异常,我的服务端也正常 ...

  7. MySQL Profiling--常用命令

    ##=====================================## ## 查看PROFILING是否开启 SELECT @@profiling ## 开始会话级别PROFILING # ...

  8. openresty 集成 sentry 异常系统

    sentry 是一个方便的错误异常追踪系统,同时社区也提供了openresty 的lua 包,使用docker-compose 进行测试 备注: sentry 部分的配置来自官方文档 环境准备 doc ...

  9. kettle的系列教程

    kettle--window开发环境和linux运行环境的迁移 kettle的输入输出组件和脚本组件 kettle--变量的使用 kettle的资源库 kettle的job kettle的hello ...

  10. antd 知识点

    表格实现:不管多少列,为列指定一个宽度,让表格在容器里可左右拖动 例子文件地址:https://github.com/cag2050/antd_mobx_demo/blob/master/src/co ...