Go语言视频零基础入门到精通

admin · 发表于 2018-4-2 11:29:06

碰到了一个问题，想简洁，所以在页面上使用
<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.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">
<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>

复制代码

效果：

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万！大数据从入门到精通学习路线	年薪50万！机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

Java亿级流量电商系统视频教程

年薪50万Spark2.0从入门到精通

年薪50万！人工智能学习路线教程

[默认分类] 使用jquery.mCustomScrollbar自定义滚动条（3）callback onCreate