修改浏览器默认滚动条插件
修改浏览器默认滚动条插件
拉普拉斯婷 发表于2年前
修改浏览器默认滚动条插件
  • 发表于 2年前
  • 阅读 7
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: Perfect ScrollBar插件美化浏览器默认的滚动条

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

共有 人打赏支持
粉丝 0
博文 33
码字总数 5836
×
拉普拉斯婷
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: