文档章节

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

拉普拉斯婷
 拉普拉斯婷
发布于 2016/06/17 14:14
字数 466
阅读 9
收藏 0
点赞 0
评论 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 ⋅ 0

19个带示例的jQuery滚动条插件

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

彭博 ⋅ 2012/07/25 ⋅ 14

超轻量级html5滚动插件--JRoll

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

BarZu ⋅ 2015/11/05 ⋅ 0

简约强大的自定义滚动条插件--Perfect Scrollbar

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

匿名 ⋅ 2017/08/29 ⋅ 0

聊天窗口,新加的内容直接 往上顶

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

陈映亮 ⋅ 2016/07/15 ⋅ 0

jquery 网页局部打印总结

最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种。 最初使用的是jquery.jqprint-0.3.js,是在弹窗的情况下使用,即使...

幸福的魂魄 ⋅ 2014/09/11 ⋅ 0

Lazy Load, 延迟加载图片的 jQuery 插件

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正...

xiaoxin ⋅ 2014/07/09 ⋅ 0

滚动条插件 Perfect Scrollbar 0.8.0 发布

Perfect Scrollbar 0.8.0 已发布,更新内容: 使用 npm 5 替代 Yarn 放弃对 IE 10 的支持 重构通用库 修复 TypeScript 定义 增加四舍五入的误差容差 完整更新内容 Perfect Scrollbar 是一个简...

王练 ⋅ 2017/08/30 ⋅ 4

再谈弹窗那些事

再谈弹窗那些事 很早之前对 jQuery 略懂的时候,写过一篇简单实现弹窗功能的文章,而且“不害怕”的发表到了我爱水煮鱼上。很基础,很简单,里面的有些做法都是不成熟的,只能说简单的实现了...

上赶的大老鼠 ⋅ 2014/07/28 ⋅ 3

jQuery页面滚动图片等元素动态加载实现

一、关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多。比如说光棍节很疯狂的淘宝商城页面。 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类...

lovethe51cto ⋅ 2016/04/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Qt中的坑--QTreeWidget添加item 不能显示出来

QTreeWidget* pTree = ui.TreeCheckList; QTreeWidgetItem* item = new QTreeWidgetItem(pTree) ;item->setText ( 0, "test" );pTree->addTopLevelItem (item ); 原因是因为创建一个......

k91191 ⋅ 29分钟前 ⋅ 0

使用Guava的RateLimiter做限流

场景: 1. 在日常生活中,我们肯定收到过不少不少这样的短信,“京东最新优惠卷…”,“天猫送您…”。这种类型的短信是属于推广性质的短信。这种短信一般群发量会到千万级别。然而,要完成这...

wind2012 ⋅ 29分钟前 ⋅ 0

QSlider重新enterEvent

#ifndef DIALOG_H#define DIALOG_H#include <QDialog>namespace Ui {class Dialog;}class Dialog : public QDialog{ Q_OBJECTpublic: explicit Dialog(QW......

xxdd ⋅ 30分钟前 ⋅ 0

生产环境redis备份与恢复

生产环境redis备份与恢复 Tyrant0532 0人评论 1563人阅读 2018-02-01 20:34:10 redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理。生产中我们主...

rootliu ⋅ 32分钟前 ⋅ 0

nginx中出现403forbidden错误

nginx “403 Forbidden” 错误 出现这个错误一般是因为以下原因: 网站禁止特定的用户访问所有内容,例:网站屏蔽某个ip访问。 访问禁止目录浏览的目录,例:设置autoindex off后访问目录。 ...

河图再现 ⋅ 32分钟前 ⋅ 0

上海云栖:金融政企行业的CDN最佳实践

摘要: 在刚刚结束的上海云栖大会飞天技术汇分论坛上,阿里云视频云产品架构师罗小飞进行了《阿里云CDN——面向金融政企的CDN最佳实践》主题分享,为上海的嘉宾介绍CDN的解决方案与技术服务体...

猫耳m ⋅ 38分钟前 ⋅ 0

docker 基本操作

docker介绍 Docker项目提供了构建在Linux内核功能之上,协同在一起的的高级工具。其目标是帮助开发和运维人员更容易地跨系统跨主机交付应用程序和他们的依赖。Docker通过Docker容器,一个安全...

haoyuehong ⋅ 39分钟前 ⋅ 0

上海云栖:金融政企行业的CDN最佳实践

摘要: 在刚刚结束的上海云栖大会飞天技术汇分论坛上,阿里云视频云产品架构师罗小飞进行了《阿里云CDN——面向金融政企的CDN最佳实践》主题分享,为上海的嘉宾介绍CDN的解决方案与技术服务体...

阿里云云栖社区 ⋅ 41分钟前 ⋅ 0

安装与配置hadoop

一、CentOS7安装 java8,参考centos7.0 安装java1.8,tomcat 二、安装hadoop 版本V3.03 1、下载并解压hadoop # mkdir /usr/local/app# mkdir /usr/local/app/hadoop# cd /usr/local/app/had......

iturtle ⋅ 43分钟前 ⋅ 0

Idea设置Serializable自动生成

File --> Settings --> Editor --> Inspections ->Serialization issues,在该项下找到“Serializable class without 'serialVersionUID' ”并勾选...

Gmupload ⋅ 46分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部