jquery滚动条插件slimScroll使用方法


Posted in Javascript onFebruary 09, 2017

本文实例为大家总结了滚动条插件slimScroll的使用方法,供大家参考,具体内容如下

simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScroll

TIP:

1.slimScroll在使用的时候要依赖JQ,所以首次使用的时候要引入JQ再引入simScroll插件
2.不支持resize的时候重新调用插件,不过有人已经修改过源码,这是修改过的版本的下载地址:https://github.com/kujian/jQuery-slimScroll

resize重新调用插件增加的代码部分:

function setScroll(){
 $(".box-list").slimScroll({
  height: boxHeight,
  alwaysVisible: true,
 });
}

setScroll();

$(window).on("resize",setScroll);

插件的调用以及参数设置:

$(function() {
 $(".slimscroll").slimScroll({
  width: 'auto', //可滚动区域宽度
  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' //轨道圆角
 });
});

slimScroll事件——当滚动条达到父容器的顶部或底部触发事件:

$(selector).slimScroll().bind('slimscroll', function(e, pos){
 console.log("Reached " + pos");
});

完整例子:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>slimScroll插件使用例子</title>
</head>
<body>
 
 <div class="superDiv"> 
  <div id="innerDiv"> 
   <p>xxxxxxxxxxxxxx</p> 
  </div> 
 </div> 
 
 
 <script src="jquery.min.js"></script>
 <script src="jquery.slimscroll.js"></script>
 <script>
 
  $(function(){ 
   $('#innerDiv').slimScroll({ 
    height: '250px' 
   });
   
   $('#innerDiv').slimScroll().bind('slimscroll', function(e, pos){ 
    if(pos=='bottom'){
     // 执行其他逻辑
    }
   }); 
  }); 
  
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery回车实现登录简单实现
Aug 20 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
JS回调函数简单用法示例
Feb 09 #Javascript
Bootstrap列表组学习使用
Feb 09 #Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 #Javascript
Bootstrap进度条学习使用
Feb 09 #Javascript
详解浏览器渲染页面过程
Feb 09 #Javascript
JavaScript 函数节流详解及方法总结
Feb 09 #Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 #Javascript
You might like
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php简单的会话类代码
2011/08/08 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
smarty表格换行实例
2014/12/15 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python魔术方法详解
2015/02/14 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python实现拼接图片
2020/03/23 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
python开根号实例讲解
2020/08/30 Python
Python字典实现伪切片功能
2020/10/28 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
党性修养心得体会2016
2016/01/21 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
js前端图片加载异常兜底方案
2022/06/21 Javascript