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. IP通信基础学习第一周

    在IP方向上,IP通信基础是学习其他诸如:数字程教控交换技术与应用.IPV6技术与应用.SDH传输技术与应用等课程的基础. 学习IP通信基础,对学生而言至少可以拿学分,不仅有利于以后的学习,还有机会从 ...

  2. Missing library: xdoclet-1.2.1.jar.如何解决?

    去这里下载xdoclet-bin-1.2.1.zip http://sourceforge.net/projects/xdoclet/files/xdoclet/1.2.1/ 解压出来,比如解压到C: ...

  3. mysql获取随机字符串和随机数的方法

    在我们开发的过程中,我们可能会需要在表中随机生成一些数据以供我们进行相应的测试. 就像我之前发的“mysql创建存储过程向数据表中加入规定条数的数据” 那么我们应该怎样生成随机的字符串和随机数字呢? ...

  4. jQuery循环

    1.循环数组.对象: .$each(数组/对象,结果函数),即.$(arr,function(x,y) {...} ) 如果是数组,则函数中的x表示索引,y表示索引对应的值,只传递一个参数的话则表示索 ...

  5. vue中的.native修饰符

    如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...

  6. FL studio钢琴卷工具简介

    FL studio中的钢琴卷工具在业内各编曲软件中享有当之无愧的声誉.钢琴卷是一款将音符和自动数据发送到钢琴卷的频道相关联的插件.而钢琴卷的这个操作运行过程被称为“排序”. 下面给大家介绍讲解钢琴卷中 ...

  7. Ubuntu 安装 Docker CE

    注:本文转载自<Docker入门> 警告:切勿在没有配置 Docker APT 源的情况下直接使用 apt 命令安装 Docker. 准备工作 系统要求 Docker CE 支持以下版本的 ...

  8. Bytom Java版本离线签名

    比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom tx_s ...

  9. Learning-Python【34】:进程之生产者消费者模型

    一.什么是生产者消费者模型 生产者指的是生产数据的任务,消费者指的是处理数据的任务,在并发编程中,如果生产者处理速度很快,而消费者处理速度很慢,那么生产者就必须等待消费者处理完,才能继续生产数据.同样 ...

  10. 微信小程序开发学习记录

    两天撸了一遍小程序的文档,跟网页相似,个人感觉是简化版.但是因为开放了很多微信自带的接口又使得部分功能开发起来相对方便 思维导图如下: 目前我的理解大概是这么个逻辑,以后深入学习后可能会有更改 跟着大 ...