文档章节

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

拉普拉斯婷
 拉普拉斯婷
发布于 2016/06/17 14:14
字数 466
阅读 10
收藏 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/11/27
2K
0
19个带示例的jQuery滚动条插件

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

彭博
2012/07/25
51K
14
简约强大的自定义滚动条插件--Perfect Scrollbar

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

匿名
2017/08/29
200
0
vue-router 源码概览

源码这个东西对于实际的工作其实没有立竿见影的效果,不会像那些针对性极强的文章一样看了之后就立马可以运用到实际项目中,产生什么样的效果,源码的作用是一个潜移默化的过程,它的理念、设...

清夜
10/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部