文档章节

修改浏览器默认滚动条插件

拉普拉斯婷
 拉普拉斯婷
发布于 2016/06/17 14:14
字数 466
阅读 9
收藏 0

js滚动条美化perfectScrollbar插件使用方法

一、Perfect ScrollBar功能描述 Perfect ScrollBar能够描绘出异乎寻常的页面UI描绘。如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案,一个简略可是十分棒的滚动条描绘插件。

js滚动条美化perfectScrollbar插件使用方法

二、Perfect ScrollBar主要特性: • 不需要修改任何的元素的css

• 滚动条不影响最初的页面布局设计

• 滚动条支持完整的自定义

• 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化

• 依赖于jQuery和相关几个类库

• 不需要定义宽度和高度。它会固定在容器的右下

• 你可以修改任何滚动条的样式,不依赖于其它脚本

• 滚动条支持'update'方法。如果你需要修改滚动条的位置和大小,只需要调用这个方法即可

• 不使用'scrollTop'和'scrollLeft',不是用任何绝对定位

三、Perfect ScrollBar使用要求: • 必须有一个内容元素

• 容器必须拥有一个'position'的CSS样式定义

• 滚动条的position必须是'absolute'

• scrollbar-x必须拥有一个bottom的样式定义,scrollbar-必须有一个'right'的样式定义

四、Perfect ScrollBar实例代码: HTML代码

<style> #Demo { position: ‘relative’; } </style>
<div id=‘Demo’><div>... </div></div>

javascript

$(‘#Demo’).perfectScrollbar();

如果容器大小或者位置变化了,调用如下方法即可:

$(‘#Demo’).perfectScrollbar(‘update’);

如果你需要销毁,调用如下:

$(‘#Demo’).perfectScrollbar(‘destroy’);

如果你需要滚动到某一个特定位置,调用如下:

$(“#Demo”).scrollTop(0);
$(“#Demo”).perfectScrollbar(‘update’);

更多网站建设知识、教程www.internetke.com

本文转载自:http://www.internetke.com/tutorial/js/2014/0922/623.html

共有 人打赏支持
拉普拉斯婷
粉丝 0
博文 33
码字总数 5836
作品 0
深圳
jQuery自定义滚动条样式插件mCustomScrollbar

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar。 关于 jScrollPane,大家见过的可能...

我输过但从未怕过
2016/03/22
90
0
19个带示例的jQuery滚动条插件

1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于...

彭博
2012/07/25
49.5K
14
超轻量级html5滚动插件--JRoll

JRoll 是一款能滚起上万条数据,具有滑动加速、回弹、缩放、滚动条、滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费,兼有与IScroll几乎一致用法的超轻量级html5滚动插件。 var ...

BarZu
2015/11/05
1K
0
简约强大的自定义滚动条插件--Perfect Scrollbar

Perfect Scrollbar 简约,但完美的自定义滚动条插件。 完美意味着什么? 无需对默认元素有任何更改 滚动条不应影响默认设计布局 滚动条的设计应(几乎)完全可定制 若容器或内容大小发生变化...

匿名
2017/08/29
200
0
聊天窗口,新加的内容直接 往上顶

最新在写聊天需求 ,遇到了个问题,就是当有新消息时,如果把老的消息顶上去。也就是把SCROLL一直在底部 粘出简单的DEMO测试代码 用了JS的mCustomScrollbar插件 下面是相关的文档: mCustomS...

陈映亮
2016/07/15
20
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

(一)软件测试专题——之Linux常用命令篇01

本文永久更新地址:https://my.oschina.net/bysu/blog/1931063 【若要到岸,请摇船:开源中国 不最醉不龟归】 Linux的历史之类的很多书籍都习惯把它的今生来世,祖宗十八代都扒出来,美其名曰...

不最醉不龟归
20分钟前
3
0
蚂蚁金服Java开发三面

8月20号晚上8点进行了蚂蚁金服Java开发岗的第三面,下面开始: 自我介绍(要求从实践过程以及技术背景角度着重介绍) 实习经历,说说你在公司实习所做的事情,学到了什么 关于你们的交易平台...

edwardGe
27分钟前
7
0
TypeScript基础入门 - 函数 - this(三)

转载 TypeScript基础入门 - 函数 - this(三) 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.4 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
37分钟前
0
0
Spark core基础

Spark RDD的五大特性 RDD是由一系列的Partition组成的,如果Spark计算的数据是在HDFS上那么partition个数是与block数一致(大多数情况) RDD是有一系列的依赖关系,有利于Spark计算的容错 RDD中每...

张泽立
44分钟前
0
0
如何搭建Keepalived+Nginx+Tomcat高可用负载均衡架构

一.概述 初期的互联网企业由于业务量较小,所以一般单机部署,实现单点访问即可满足业务的需求,这也是最简单的部署方式,但是随着业务的不断扩大,系统的访问量逐渐的上升,单机部署的模式已...

Java大蜗牛
59分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部