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

点击按钮的时候，进行content里面添加div_box的，这时候滚动条初始化才开始在div_box元素上进行；

小结：

$('.content .div_box').mCustomScrollbar()配合参数live：on向未来元素.div_box上加个滚动条方法，猜想是这时候是绑定了一个事件：在div_box被创建出来之后，进行加载滚动条；

所以看到一个过程：

content里面先append div_box，这时候还是浏览器默认滚动条，然后再变成优化后的自定义滚动条；

因为append一个元素很快，浏览器启动默认滚动条也很快，几乎是同时的；但是jquery mCustomScrollbar加载滚动条有个过程，所以有个两段的过程；

感觉有个过程，比较突兀，个人感觉这种方法不是很好，不建议使用；

仅仅是做个例子记录而已。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jquery版的自定义滚动条</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <!--<link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.min.css">-->
  8. <link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.css">
  9. <style type="text/css">
  10. .content{
  11.     width: 500px;
  12.     margin: 0 auto;
  13.     border: 1px solid #ccc;
  14.     padding: 10px;
  15.     height: 300px;
  16. }
  17. .div_box{
  18.     height: 280px;
  19.     border: 1px solid #ccc;
  20.     overflow: auto;
  21. }
  22. .toolbar{
  23.     width: 500px;
  24.     margin: 0 auto;
  25.     margin-top: 20px;
  26. }
  27.  
  28. /** 覆盖滚动条样式 */
  29. /*
  30. .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  31.     background-color: #333;
  32. }
  33. .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  34.     background-color: #333;
  35.     background-color: rgba(102,102,102,0.9);
  36. }
  37. */
  38. .mCSB_inside > .mCSB_container {
  39.     margin-right: 20px;
  40. }
  41. </style>
  42. </head>
  43.  
  44. <body>
  45.  
  46. <div class="container">
  47.     <div class="row">
  48.         <h3 class="text-center">详情描述</h3>
  49.         <!--<div class="content mCustomScrollbar" data-mcs-theme="dark"></div>-->
  50.         <div class="content">
  51.  
  52.         </div>
  53.         <div class="toolbar">
  54.             <button class="btn btn-default" id="btn_show">添加div_box</button>
  55.         </div>
  56.     </div>
  57. </div>
  58.  
  59. </body>
  60. <script src="jquery/jquery.min.js"></script>
  61. <script src="bootstrap/bootstrap.min.js"></script>
  62. <script src="jquery/jquery.mCustomScrollbar.concat.min.js"></script>
  63. <script type="text/javascript">
  64. $(function(){
  65.       //将滚动条添加到未来元素.div_box上
  66.       $('.content .div_box').mCustomScrollbar({
  67.               theme:"dark-3",
  68.               scrollInertia:100,
  69.               scrollButtons:{
  70.                 enable: true
  71.             },
  72.             live:"on"
  73.       });
  74.  
  75.       //点击添加div_box元素
  76.       $('#btn_show').click(function(){
  77.               var div = '<div class="div_box">';
  78.               var string = '所谓的甩头。就是虚实举球马上停加碎步。就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向带着这几点疑问看视频吧：1.C防两个人的时候是怎么防的？2.怎么应对女PF的钟头？3.被吸到的时候是怎么保证不倒的？还是就不让敌人吸到你？4.篮板是怎么抢的？ 等分？ 直接秒？';
  79.               for(var i=0; i<3;i++){
  80.                 string += string;
  81.             }
  82.             div += string;
  83.             div += '</div>';
  84.             $('.content').append(div);
  85.       });
  86. });
  87. </script>
  88. </html>

效果：

=========================为工作中Ztree每次加载想的一个demo=======================================================================================================================

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jquery版的自定义滚动条</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <!--<link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.min.css">-->
  8. <link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.css">
  9. <style type="text/css">
  10. .content{
  11.     width: 500px;
  12.     margin: 0 auto;
  13.     border: 1px solid #ccc;
  14.     padding: 10px;
  15.     height: 300px;
  16. }
  17. #fnTree{
  18.     height: 280px;
  19.     border: 1px solid #ccc;
  20.     overflow: auto;
  21. }
  22. .toolbar{
  23.     width: 500px;
  24.     margin: 0 auto;
  25.     margin-top: 20px;
  26. }
  27.  
  28. /** 覆盖滚动条样式 */
  29. /*
  30. .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  31.     background-color: #333;
  32. }
  33. .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  34.     background-color: #333;
  35.     background-color: rgba(102,102,102,0.9);
  36. }
  37. */
  38. .mCSB_inside > .mCSB_container {
  39.     margin-right: 20px;
  40. }
  41. </style>
  42. </head>
  43.  
  44. <body>
  45.  
  46. <div class="container">
  47.     <div class="row">
  48.         <h3 class="text-center">详情描述</h3>
  49.         <!--<div class="content mCustomScrollbar" data-mcs-theme="dark"></div>-->
  50.         <div class="content">
  51.  
  52.         </div>
  53.         <div class="toolbar">
  54.             <button class="btn btn-default" id="btn_add">重新加载fnTree</button>
  55.         </div>
  56.     </div>
  57. </div>
  58.  
  59. </body>
  60. <script src="jquery/jquery.min.js"></script>
  61. <script src="bootstrap/bootstrap.min.js"></script>
  62. <script src="jquery/jquery.mCustomScrollbar.concat.min.js"></script>
  63. <script type="text/javascript">
  64. var count = 0;
  65.  
  66. $(function(){
  67.  
  68.       //点击加载fnTree
  69.       $('#btn_add').click(function(){
  70.               //如果有fnTree DOM，先清除fnTree DOM，防止后面没法加载滚动条；
  71.               if($('.content #fnTree').length>0){
  72.                   $('.content #fnTree').remove();
  73.               }
  74.               $('.content').append('<div id="fnTree"></div>');
  75.  
  76.               //ajax请求节点，请求完成后 zTree init('fnTree')
  77.               var times = '第'+(++count)+'次加载...<br/>';
  78.               var string = '所谓的甩头。就是虚实举球马上停加碎步。就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向带着这几点疑问看视频吧：1.C防两个人的时候是怎么防的？2.怎么应对女PF的钟头？3.被吸到的时候是怎么保证不倒的？还是就不让敌人吸到你？4.篮板是怎么抢的？ 等分？ 直接秒？';
  79.              for(var i=0; i<3;i++){
  80.                 string += string;
  81.              }
  82.              $('.content #fnTree').html(times+string);
  83.  
  84.             //fnTree init结束，开始加载滚动条,因为zTree init没有回调方法，所以init之后写就行
  85.               $('.content #fnTree').mCustomScrollbar({
  86.                   theme:"dark-3",
  87.                   scrollInertia:100,
  88.                   scrollButtons:{
  89.                     enable: true
  90.                 }
  91.               });
  92.       });
  93. });
  94. </script>
  95. </html>

使用jquery.mCustomScrollbar自定义滚动条（4）live使用，向未来元素添加滚动条，不实用，了解一下的更多相关文章

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

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

  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 中 on 方法-----给未来元素添加事件

    <li class='clear dir-li'> <div class='left title'> 添加到目录:</div> <div class='lef ...

  5. 自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

    前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...

  6. VC对话框实现添加滚动条实现滚动效果

    对话框滚动条及滚动效果实现,用的api主要有: ScrollWindow, SetScrollInfo, GetScrollInfo, SetWindowOrgEx.涉及的数据结构为SCROLLINF ...

  7. 滚动条mCustomScrollbar自定义

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

  8. jquery mCustomScrollbar 滚动条宽度的设置

    一.项目使用 $("#iscroll-1, #tree_box, .work, .item1, .item2, .item3, .item4").mCustomScrollbar( ...

  9. 【JQuery插件】元素根据滚动条位置自定义吸顶效果

    ;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...

随机推荐

  1. HPU第三次积分赛-D：Longest Increasing Subsequence（DP）

    Longest Increasing Subsequence 描述 给出一组长度为n的序列,a1​,a2​,a3​,a4​...an​, 求出这个序列长度为k的严格递增子序列的个数 输入 第一行输入T ...

  2. HDU2027：统计元音

    Problem Description 统计每个元音字母在字符串中出现的次数. Input 输入数据首先包括一个整数n,表示测试实例的个数,然后是n行长度不超过100的字符串. Output 对于每个 ...

  3. MySQL主从、环境搭建、主从配制

    1. MySQL主从介绍    2.环境搭建   2.主从配制:修改主配制文件:vim /etc/my.cnf添加: server_id = ###log_bin = diy_name然后保存重启:/ ...

  4. django ---Auth模块

    Auth模块 本文目录 1 Auth模块是什么 2 auth模块常用方法 3 扩展默认的auth_user表 回到目录 1 Auth模块是什么 Auth模块是Django自带的用户认证模块: 我们在开 ...

  5. LG3978 【[TJOI2015]概率论】

    前置:卡特兰数 记\(C_n\)为\(n\)个节点的二叉树的个数,\(C_0=1\),对于\(n \geq 1\),取一个根节点,枚举其左子树大小,有 \[C_n=\sum_{i=0}^{n-1}C_ ...

  6. Hibernate(二)

    性能分析 抓取策略 研究对象 研究怎么样提取集合的,该策略应该作用与set元素上 研究从一的一方加载多的一方 案例 查询cid为1的班级的所有的学生 明:通过一条sql语句:左外链接,把classes ...

  7. 解决GitHub下载速度比较慢

    第一步,打开本机上的Hosts文件 首先,什么是Hosts文件? 在互联网协议中,host表示能够同其他机器互相访问的本地计算机.一台本地机有唯一标志代码,同网络掩码一起组成IP地址,如果通过点到点协 ...

  8. 浅谈XSS攻击原理与解决方法

    概述 XSS攻击是Web攻击中最常见的攻击方法之一,它是通过对网页注入可执行代码且成功地被浏览器 执行,达到攻击的目的,形成了一次有效XSS攻击,一旦攻击成功,它可以获取用户的联系人列表,然后向联系人 ...

  9. 论 微服务 和 Entity Framework 对 数据 的 割裂

    微服务 的 本质 是 面向对象, 微服务 是 面向对象 对 数据中心 发起的挑战, 在 微服务 架构下, “数据为中心” 的 传统架构 被 严重 割裂, 微服务 的 先天矛盾, 是 对象 和 数据 的 ...

  10. java编程调试技巧

    1 多线程调试 开发过多线程应用的朋友应该有体会,有些时候,为了观察多个线程间变量的不同状态,以及锁的获取等,就会想到在代码里加个断点debug一下. 在IDE里断点停下来的时候,可以切换到另外的线程 ...