使用jquery.mCustomScrollbar自定义滚动条(2)
参考博客: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)的更多相关文章
- 使用jquery.mCustomScrollbar自定义滚动条(4)live使用,向未来元素添加滚动条,不实用,了解一下
.div_box元素是本来没有的,在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面,参数live:on; 点击按钮的时候,进行con ...
- 使用jquery.mCustomScrollbar自定义滚动条(3)callback onCreate
碰到了一个问题,想简洁,所以在页面上使用 <div class="div_box mCustomScrollbar" data-mcs-theme="dark-3& ...
- 使用jquery.mCustomScrollbar自定义滚动条(1)
参考博客:https://blog.csdn.net/cdnight/article/details/41351505 api网址:http://manos.malihu.gr/jquery-cust ...
- 基于jQuery的自定义滚动条
在线演示 本地下载
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义滚动条 - mCustomScrollbar
项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...
- 自定义滚动条mCustomScrollbar
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...
- 滚动条mCustomScrollbar自定义
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
随机推荐
- Echarts全解注释
coordinate-geo.js文件为地理坐标系的配置参数 mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal&qu ...
- 我的TDD实践---TDD概念篇
“我的TDD实践”系列之TDD概念篇 写在前面: 我的TDD实践这几篇文章主要是围绕测试驱动开发所展开的,其中涵盖了一小部分测试理论,更多的则是关注工具的使用及环境的搭建,做到简单实践先行,后理论专精 ...
- test20190409 线段
题意 线段(segment) [题目描述] 给定n条线段,第i条线段的左端点为\(l_i\),右端点为\(r_i\).第i条线段覆盖了点x当且仅当\(l_i ≤x ≤ r_i\). 给定Q个询问,第i ...
- spring获取jdbc链接底层原理
获取连接池的连接二种逻辑 1.一个事务中,一个连接 (底层逻辑:threadlocal存储 里面是map: key是数据源,value:链接) map存储应该是为多数据源使用的2.没有事务的serv ...
- 浮动IP(FLOAT IP)
主要谈一谈关于浮动IP的东西,介绍下浮动IP是什么 1.为什么要有浮动IP这个东西 现在有一个场景,在一台Linux上部署一个web应用,应用跑在tomcat里面,linux网卡上的ip是 ...
- oracle使用一条语句批量插入多条数据
例如我有一个test表 create table (stuid int,name varchar(20); 插入多条数据,注意不能直接使用insert into test values(1,'a'), ...
- MySQL--查看内存信息
常见查看内存信息命令 ## 使用free -m命令查看 free -m ## 使用cat /proc/meminfo 查看 cat /proc/meminfo ## 使用dmidecode命令查看 d ...
- ClusterControl docker 环境搭建
ClusterControl 是一款比较强大的数据库管理平台,包含了丰富的数据库管理功能. 我们可以用来方便的进行数据管理 测试使用docker-compose 管理 环境准备 docker-comp ...
- Bat相关的项目应用
原 bat 命令如何启动远程PC上的一个程序? 原 bat 自动解压缩,发布asp.net程序 原 bat 自动更新代码,编译,压缩asp.net程序 原 bat自动备份压缩文件 原 bat命令ora ...
- getModifiers 方法解释。
modifier: 字面意思修饰符. getModifiers 得到的就是 前面的 的修饰符 ,这个方法 字段和方法 都有.这个方法的值是 修饰符 相加的到的值. 例子: public class ...