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的更多相关文章

  1. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  2. 插件五之滚动条jquery.slimscroll.js

    前言 slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测 ...

  3. CSS区块、浮动、定位、溢出、滚动条

    CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称            属性值                ...

  4. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  5. sub,dl,dt,排版,横向滚动条,浮动元素居中,box-sizing

    1.sub标签 下标 2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容.在使用时候我们能简洁html代码情况下,学会灵活使用dl ...

  6. 17 , CSS 区块、浮动、定位、溢出、滚动条

    1.CSS 中区块的使用 2.CSS 中浮动的使用 3.CSS 中定位的使用 4.CSS 中溢出的使用 5.CSS 中滚动条的使用 17.1 CSS 中区块的使用 属性名称 属性值 说明 width ...

  7. 针对模拟滚动条插件(jQuery.slimscroll.js)的修改

    在开发过程中程序员总会碰到产品经理提出的各种稀奇古怪的需求,尽管有些需求很奇葩,但不得不说有些须有还是能指引我们不断的学习与进步,最近在工作中就碰到这种问题.需求是要求在各主流浏览器上使用自定义的滚动 ...

  8. 在 IE 浏览器中,使用 bootstrap 使得页面滚动条浮动显示,自动隐藏,自动消失

    貌似是从 IE10 开始?为了触屏操作优化浏览器的内容显示,IE 浏览器提供了一种可以浮动显示,自动隐藏的滚动条样式,但是这个样式会在某些情况下造成一些困扰,比如下图... 其实默认情况下,桌面版的 ...

  9. jquery滚动条插件slimScroll

    参数 width: 'auto', //可滚动区域宽度         height: '100%', //可滚动区域高度         size: '10px', //组件宽度         c ...

随机推荐

  1. linux 创建用户和添加到组

    1.添加用户 先用root用户登录 useradd -m testuser #这样的做会在/home下创建目录 2.指定shell #cat /etc/passwd  #查看用户指定shell roo ...

  2. linux下git服务器安装

    git服务器配置http://www.cnblogs.com/dee0912/p/5815267.html git教程https://www.liaoxuefeng.com/wiki/00137395 ...

  3. hdu4777 树状数组

    题意:给了n个数,然后又m次查询,询问[L,R] 内有多少个数与其他的数不互质. 解: 我们首先可以通过处理得出每个数的有效区间,LR 就是 左边L位置上的数 和他不互质, 右边R位置上的数和不互质, ...

  4. rsync 守护进程备份报错

    [root@nfs01 backup]# rsync -avz  /backup rsync_backup@172.16.1.41::backupPassword: @ERROR: auth fail ...

  5. webservice 开发规范

    JAVA中共有三种WebService规范,分别是:JAXM&SAAJ.JAX-WS(JAX-RPC).JAX-RS 下面类分别简要介绍一下这三个规范 1. JAX-WS (Java API ...

  6. Win10问题

    WIN10去除我的电脑上面的6个文件夹 把下面代码复制,保存到.reg中,然后执行即可(修改注册表文件.reg) Windows Registry Editor Version 5.00 ;如需还原去 ...

  7. topcoder srm 595 div1

    problem1 link 判断最后剩下哪些区间没有被其他区间覆盖. problem2 link 假设$b$的位置固定,那么不同的$a$会使得$[a,b]$有两种情况,第一种,$[a,b]$ is n ...

  8. Build Tool

    building tool: 一.building tools 为什么主流? Gradle 是目前比较流行的构建工具之一,Android Studio 中集成的就是 Gradle,并针对 Androi ...

  9. JS(JavaScript)的初了解5(更新中···)

    1.函数 关键词function 首先,我们先复习一下前面的知识: var 是JS的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成. var可以在内存模块提前(JS代码执行前)完 ...

  10. [js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端)

    <body> <div class="box"> <div class="container"> <ul> &l ...