SlimScroll插件学习

SlimScroll插件学习

SlimScroll插件，是一个很好用的滚动条插件。

第一个实例程序：

js代码：

        <script src="../slimScroll/jquery-3.1.1.min.js" type="text/javascript"></script>

        <script src="../slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function() {

                $('#testDiv').slimscroll({

                    height: '500px'

                });

            });

        </script>

html代码：

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.</p>

<p>Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.</p>

<p>Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.</p>

<p>Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.</p>

</div>

</body>

常用的参数定义:
width:容器宽度

height:容器的高度

size:滚动条的宽度

position:滚动条的位置，有left和right两个值可选

color:滚动条的颜色

alwaysVisible:是否禁用隐藏滚动条

distance：距离边框的距离

start:滚动条初始位置，top或bottom

wheelStep:滚动条的滚动值

railVisible:滚动条的背景轨迹

railColor:滚动条背景轨迹颜色

railOpacity:滚动条背景轨迹透明度

allowPageScroll ：滚动条滚到顶部或底部是否允许页面滚动。默认为false.

scrollTo：跳转到指定滚动值，可以呼吁任何元素

SlimScroll插件学习的更多相关文章

uexQQ插件学习心得
uexQQ插件学习心得 uexQQ插件的作用:通过qq可以分享图文,音乐,应用到相应的qq空间.支持手机客户端分享和手机webQQ分享.下面我们就来看一看他的一些方法. 我们先说一下分享的步骤,这个步 ...
emmet插件学习，练习中遇到一些问题
emmet插件学习:帮助提高敲代码效率的插件参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...
bootstrap插件学习
转自http://v3.bootcss.com/javascript/ bootstrap javascript插件学习模态框打开模态框 <button type="button& ...
FullPage.js全屏滚动插件学习总结
如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...
Jquery插件学习
前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...
bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
封装js插件学习指南
封装js插件学习指南 1.原生JavaScript插件编写指南 => 传送门 2.如何定义一个高逼格的原生JS插件 =>传送门 3.手把手教你用原生JavaScript造轮子 => ...
Siki_Unity_2-2_NGUI_UI插件学习(3.6.8版本)（未学）
Unity 2-2 NGUI UI插件学习(3.6.8版本)(未学)

随机推荐

AndroidStudio_Button
这里回顾一下Button的使用方法: 1.在page1.xml文件中定义一个按钮控件 <Button android:id="@+id/btn_textview" andro ...
git 命令详细介绍
Git 命令详解 Git的基本命令: git pull:从其他的版本库(既可以是远程的也可以是本地的)将代码更新到本地,例如:'git pull origin master'就是将origin这个版本 ...
Django 发送电子邮件
官方片段: 虽然Python使得通过smtplib 模块发送电子邮件相对容易,但Django提供了一些轻量级包装.提供这些包装器是为了使发送电子邮件更加快速,以便在开发过程中轻松测试电子邮件发送,并为 ...
Django 正向解析与反向解析
正向解析就是按照顺序查找访问(urls.py---view--templates) 反向解析就是根据命名空间命名来调到指定的页面用反向解析的原因: 随着功能的增加会出现更多的视图,可能之前配置的正则 ...
java System类的一些静态方法
package cn.sasa.demo2; public class SystemDemo { public static void main(String[] args) { func_array ...
SpringBoot 文件上传实践
背景:将上传的文件,如图片,写入指定服务器路径,保存起来.多文件上传时,由于HttpServletRequest不能直接取出文件数据,所以将其强制转换为MultipartHttpServletRequ ...
基于external version进行乐观锁并发控制
?version=1?version=1&version_type=external它们的唯一区别在于,_version,只有当你提供的version与es中的_version一模一样的时候, ...
ThreadLocal（一）：Thread 、ThreadLocal、ThreadLocalMap
一.ThreadLocalMap是ThreadLocal的内部类.Thread持有ThreadLocalMap的引用 Entry类继承了WeakReference<ThreadLocal< ...
Navicat工具的使用 1
Navicat 在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作MySQL数据库官网下载:https: ...
如何用python发邮件
python发送各类邮件的主要方法一.相关模块介绍发送邮件主要用到了smtplib和email两个模块,这里首先就两个模块进行一下简单的介绍: 1.smtplib模块 smtplib.SM ...

SlimScroll插件学习

SlimScroll插件学习的更多相关文章

随机推荐

热门专题