第3.1.1章 WEB系统最佳实践 js控件之slimScroll的使用
2016-11-04 20:38
393 查看
漂亮的虚拟滚动条,slimScroll下载地址
这个控件虽然很好,但是如果使用下面的样式,就好像有些多余了。
$(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' //轨道圆角 }); });
这个控件虽然很好,但是如果使用下面的样式,就好像有些多余了。
::-webkit-scrollbar-track { background-color: #F5F5F5 } ::-webkit-scrollbar { width: 6px; background-color: #F5F5F5 } ::-webkit-scrollbar-thumb { background-color: #999 }
相关文章推荐
- 第3.1.3章 WEB系统最佳实践 js控件之bootstrap-datepicker的使用
- 第3.1.2章 WEB系统最佳实践 js控件之requirejs的使用
- 第3.1.7章 WEB系统最佳实践 js控件之bootstrap switch
- 第3.1.4章 WEB系统最佳实践 js控件之bootstrap-suggest-plugin
- 第3.1.5章 WEB系统最佳实践 js控件之Ladda
- Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用
- 第2.1.3章 WEB系统最佳实践Spring文件配置之spring-dao.xml
- 轻量级单点登录系统最佳实践(八)——5.3. 企业门户系统系统演示SSOLab.Portal.WebApp
- Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性
- 第2.1章 WEB系统最佳实践Spring文件配置
- 使用NodeJS+AngularJS+MongoDB实现一个Web数据扒取-分析-展示的系统
- 第2.3章 WEB系统最佳实践属性配置
- atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 。打开浏览服务器文件夹java .net php
- iOS用WKWebView与JS交互获取系统图片及WKWebView的Alert,Confirm,TextInput的监听代理方法使用,屏蔽WebView的可选菜单
- atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 。打开浏览服务器文件夹java .net php
- 第2.1.1章 WEB系统最佳实践Spring文件配置之spring-cache.xml
- 使用activex、NPAPI插件实现web系统截屏(IE,chrome,firefox截屏控件、web截屏)
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
- 轻量级单点登录系统最佳实践(四)——第3章 Web-SSO通常实现方式
- 第2.1.4章 WEB系统最佳实践Spring文件配置之spring-hessian-server.xml