文档章节

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

拉普拉斯婷
 拉普拉斯婷
发布于 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
简约强大的自定义滚动条插件--Perfect Scrollbar

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

匿名
2017/08/29
200
0
超轻量级html5滚动插件--JRoll

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

BarZu
2015/11/05
1K
0
聊天窗口,新加的内容直接 往上顶

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

陈映亮
2016/07/15
20
0

没有更多内容

加载失败,请刷新页面

加载更多

SingleNumber136 leetCode

Given a non-empty array of integers, every element appears twice except for one. Find that single one. Note: Your algorithm should have a linear runtime complexity. Could you im......

woshixin
昨天
1
0
String ,  StringBuffer ,  StringBuilder的区别

String , StringBuffer , StringBuilder的区别 String 首先,String 是用来表示一个字符串常量的,它是一个不可变对象,意味着,一旦我们创建了某个字符串之后,就不能再改变它的值了,我们可...

tsmyk0715
昨天
2
0
区块链100讲:UTXO 和 Account 模型对比

在当前区块链世界中,主要有两种记录保存方式,UTXO 模式(Unspent Transaction Output) 和 Account 模式。Bitcoin 采用的是 UTXO 模型,Ethereum 采用的 Account 模型,同样 CITA 也采用了 ...

HiBlock
昨天
1
0
Vue中路由管理器Vue Router使用介绍(三)

一、路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 { path:'/user/:id/:name', name:'user', component:()=>import('./views/User.vue') ...

tianma3798
昨天
1
0
从ibdata文件恢复mysql数据

DROP TABLE 恢复【一】 Recover InnoDB dictionary Percona Data Recovery Tool 单表恢复

IT--小哥
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部