s插件——SlimScroll滚动美化插件

SlimScroll滚动美化插件

下载：http://www.jq22.com/demo/jQuery-slimScroll-141223223505/jquery.slimscroll.js

DEMO：http://www.jq22.com/demo/jQuery-slimScroll-141223223505/

使用方法：

html——

<div id="area">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>

javascript——

$('#area').slimscroll(options);

更多API：

$(function() {$(".slimscroll").slimScroll({width: 'auto', //可滚动区域宽度height: '100%', //可滚动区域高度size: '10px', //组件宽度color: '#000', //滚动条颜色position: 'right', //组件位置：left/rightdistance: '0px', //组件与侧边之间的距离start: 'top', //默认滚动位置：top/bottomopacity: .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' //轨道圆角});
});

手动滚动——

// 向上滚动50px
$('#area_content').slimscroll({scrollBy: '-50px'
});// 向下滚动50px
$('#area_content').slimscroll({scrollBy: '50px'
});

滚动区域设置为父元素的高度——

$('#area').slimscroll({height: $('#area').parent().outerHeight(true)+'px',
});

使用效果：

转载于:https://www.cnblogs.com/mankii/p/10076438.html

s插件——SlimScroll滚动美化插件相关推荐

jQuery插件：Tiny Scrollbar滚动条插件（滚动条美化、默认滚动条）
Tiny Scrollbar是基于jQuery的滚动条插件, 风格简洁, 可自定义样式, 体积较小. 插件特点: 支持iPhone, iPad, Android 新版1.8,可以在移动设备上滚动内容 ...
html5 滑条插件,jQuery高性能自定义滚动条美化插件
malihu是一款高性能的滚动条美化jQuery插件.该滚动条美化插件支持水平和垂直滚动条,支持鼠标滚动,支持键盘滚动和支持移动触摸屏.并且它可以和jQuery UI和Bootatrap完美的结合,相 ...
fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
dw html5怎么美化,DW CS5/CS6代码格式化、美化插件 Dreamweaver代码格式化美化插件
这个<DW CS5/CS6代码格式化.美化插件>应该是现在最好用的代码格式化扩展了. 众所周知Dreamweaver CS5 CS6自带的应用源格式只能独自格式化HTML文件与CSS文件, ...
功能强大的滚动播放插件JQ-Slide
查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htm JQ-Slide插件功能强大,滚动方式自由多样全部滚动方式方式一方式二方式三方式四方式五 ...
jQuery刻度尺滚动滑块插件
为什么80%的码农都做不了架构师?>>> jQuery刻度尺滚动滑块插件需要用到一个刻度尺插件,网上找来找去都是那几种,所以用jQuery自己写了一个. <!docty ...
html5 下拉框美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法在页面中引入tasty ...
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
vue实现循环滚动 vue-seamless-scroll插件的安装与使用 1. 安装 2. 引入 3. 直接上代码 4. 结果 1. 安装 npm install vue-seamless-scro ...

s插件——SlimScroll滚动美化插件

s插件——SlimScroll滚动美化插件相关推荐

最新文章

热门文章