浮动滚动条 slimScroll
1.引入jquery
2.映入slimScrolljs :<script src="https://cdn.bootcss.com/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
4.
filterTbodyNoScroll样式设置:
.filterTbodyNoScroll
{
display: block;
width: 100%;
max-height: calc(100vh - 305px);
}
.tableHead tr,.taskList tr{
display: table;
width: 100%;
}
3.注意引入插件需要在dom文档加载好之后
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".filterTbodyNoScroll").slimScroll({
width: '100%', //可滚动区域宽度
height: '100%', //可滚动区域高度
size: '10px', //滚动条宽度,即组件宽度
color: '#000', //滚动条颜色
position: 'right', //组件位置:left/right
distance: '0px', //组件与侧边之间的距离
start: 'top', //默认滚动位置:top/bottom
opacity: .4, //滚动条透明度
alwaysVisible: true, //是否 始终显示组件
disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件,离开时隐藏组件
railVisible: true, //是否 显示轨道
railColor: '#333', //轨道颜色
railOpacity: .2, //轨道透明度
railDraggable: true, //是否 滚动条可拖动
railClass: 'slimScrollRail', //轨道div类名
barClass: 'slimScrollBar', //滚动条div类名
wrapperClass: 'slimScrollDiv', //外包div类名
allowPageScroll: true, //是否 使用滚轮到达顶端/底端时,滚动窗口
wheelStep: 20, //滚轮滚动量
touchScrollStep: 200, //滚动量当用户使用手势
borderRadius: '7px', //滚动条圆角
railBorderRadius: '7px' //轨道圆角
});
});
</script>
浮动滚动条 slimScroll的更多相关文章
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- 插件五之滚动条jquery.slimscroll.js
前言 slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测 ...
- CSS区块、浮动、定位、溢出、滚动条
CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称 属性值 ...
- jQuery滚动条插件 – jquery.slimscroll.js
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...
- sub,dl,dt,排版,横向滚动条,浮动元素居中,box-sizing
1.sub标签 下标 2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容.在使用时候我们能简洁html代码情况下,学会灵活使用dl ...
- 17 , CSS 区块、浮动、定位、溢出、滚动条
1.CSS 中区块的使用 2.CSS 中浮动的使用 3.CSS 中定位的使用 4.CSS 中溢出的使用 5.CSS 中滚动条的使用 17.1 CSS 中区块的使用 属性名称 属性值 说明 width ...
- 针对模拟滚动条插件(jQuery.slimscroll.js)的修改
在开发过程中程序员总会碰到产品经理提出的各种稀奇古怪的需求,尽管有些需求很奇葩,但不得不说有些须有还是能指引我们不断的学习与进步,最近在工作中就碰到这种问题.需求是要求在各主流浏览器上使用自定义的滚动 ...
- 在 IE 浏览器中,使用 bootstrap 使得页面滚动条浮动显示,自动隐藏,自动消失
貌似是从 IE10 开始?为了触屏操作优化浏览器的内容显示,IE 浏览器提供了一种可以浮动显示,自动隐藏的滚动条样式,但是这个样式会在某些情况下造成一些困扰,比如下图... 其实默认情况下,桌面版的 ...
- jquery滚动条插件slimScroll
参数 width: 'auto', //可滚动区域宽度 height: '100%', //可滚动区域高度 size: '10px', //组件宽度 c ...
随机推荐
- SV randomize
randomize中的变量只支持2-state的values,不支持4-states. randc类型的变量不能被约束在solve------before的语句中. constraint可以被定义在c ...
- GoldenGate12.3中新增的Parallel Replicat (PR)介绍
Parallel Replicat介绍 在OGG 12.3.0.1中新增的一项特性parallel replicat(并行投递),相对于传统的投递和集成投递(integrated replicat), ...
- 【python】python2.x中的除法
在生信分析中有许多时候我们需要用到除法,在经历无数次break out 之后我终于发现原来python 2.x中只有整除,而没有浮点除法,这就是没有基础的弊病. 那么如何在python 2.x中运用除 ...
- 7、Kafka、AMQ、RabbitMQ对比
Kafka AMQ RabbitMQ 应用场景 AMQ/RabbitMQ Kafka
- Docker Kubernetes 健康检查
Docker Kubernetes 健康检查 提供Probe探测机制,有以下两种类型: livenessProbe:如果检查失败,将杀死容器,然后根据Pod的重启策略来决定是否重启. readines ...
- Linux 系统开启随机端口数量 调优
Linux系统随机端口 默认Linux系统开启的随机端口范围为 32768 ~ 65535.客户端连接服务监听端口需要使用到随机端口连接. Linux系统随机端口调优 1.添加内核配置参数:/etc/ ...
- nginx的ip_hash负载均衡配置
upstream 4Asite{ server 192.168.16.99:8080 fail_timeout=15s; server 192.168.16.66:8080 fail_timeout= ...
- SSM-网站后台管理系统制作(1)
好久没写博客了,忙于考试和项目答辩,今天整理一下想弄的SSM:本人想做的是博客管理平台,和博客园,CSDN,stackoverflow这些类似. 老师先让做的是后台管理系统,先给出来吧. (讲解内容: ...
- 【四】jquery之文档处理习题(内部处理、外部处理)[移动节点]
参考资料:http://jquery.cuishifeng.cn/index.html 代码: <!DOCTYPE html> <html> <head> < ...
- ubuntu18.04中python虚拟环境的安装
一:下载虚拟环境安装包 sudo apt install virtualenv sudo apt install virtualenvwrapper pwd 查看当前目录 ls -all 查看是否有 ...