浏览器滚动条美化样式插件

Jquery.Nicescroll.js

nicescroll是一个jQuery插件
支持水平滚动条！
它支持div，iframe，文本，文档页面滚动条。
所有的桌面浏览器兼容：Firefox 4 + 5 +，Chrome，Safari 4 +，Opera 10 +，IE+6
与移动设备兼容：iPhone / iPod / ipad，Android 2.2 +，黑莓手机和PlayBook（webworks /表操作系统），Windows Phone 7.5芒果和Windows手机8。
所有触摸设备兼容：ipad
compabible多输入设备（触摸笔或者鼠标）：窗面，Chrome桌面触摸笔记本。

地址：http://www.areaaperta.com/nicescroll/

Jquery.slimScroll.js

用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测),可自定义滚动条颜色,其轨迹(背景颜色),宽度,位置,滚动阀值,与容器的padding值等~使用中依赖于jquery库.

地址：http://rocha.la/jQuery-slimScroll

Jquery.Scrollbar.js

Tiny Scrollbar是基于jQuery的滚动条插件, 风格简洁, 可自定义样式, 体积较小。

插件特点：

支持iPhone, iPad, Android
新版1.8，可以在移动设备上滚动内容
可以在水平方向和垂直方向滚动
支持滚轮,拇指、跟踪、触摸。
它有一个更新函数,这样它就可以处理内容的变化。
拇指大小的滚动条,可以设置为自动或固定数量
容易定制
支持正常的滚动和移动风格转化的滚动。
轻量级其只有100行代码。大小是2,29 kb
样式可以自己设置，很自由。

地址：http://baijs.nl/tinyscrollbar/

时间： 2024-12-14 09:16:29

浏览器滚动条美化样式插件的相关文章

自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性.便百之谷之后,发现原来不 仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的.下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正:若 有更好的方案,你可以留言,让大家都开开眼界...... 自定义IE浏

新发现。css3控制浏览器滚动条的样式

&::-webkit-scrollbar-track { background-color: #7e7e7e; } &::-webkit-scrollbar { width: 14px; } &::-webkit-scrollbar-thumb { background-color: #a4a4a4; border: 1px solid #7e7e7e; border-radius: 12px; min-height: 25px; }

jQuery高性能自定义滚动条美化插件

malihu是一款高性能的滚动条美化jQuery插件.该滚动条美化插件支持水平和垂直滚动条,支持鼠标滚动,支持键盘滚动和支持移动触摸屏.并且它可以和jQuery UI和Bootatrap完美的结合,相当的强大.它的特点有: 支持垂直和水平滚动条 可调整滚动的动量 支持鼠标滚轮.键盘和移动触摸来移动滚动条 预定义主题,并且可以通过CSS来修改主题 支持RTL方向 提供大量参数来支持滚动条的美化和功能实现 提供大量方法来控制滚动条 用户自定义回调函数 可选择和搜索内容 效果演示:http://www

设置浏览器滚动条样式

1.设置隐藏滚动条 ::-webkit-scrollbar{ display:none; } 2.设置滚动条样式 /*********改变浏览器滚动条的样式****************/::-webkit-scrollbar/*整体部分*/{width: 10px; height:10px; }::-webkit-scrollbar-track/*滑动轨道*/{ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius:

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

jQuery自定义滚动条样式插件mCustomScrollbar

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

滚动条美化插件jquery.nicescroll

今天给大家介绍一个滚动条美化插件jquery.nicescroll,这个插件有以下一个主意事项: 1.兼容所有最新的桌面浏览器和旧版:Chrome,Firefox,Edge,IE8 +,Safari(win / mac),Opera 2.兼容移动设备:iPad / iPhone / iPod,Android 4 +,Blackberry手机和Playbook(WebWorks / Table OS),Windows Phone 8和10 3.兼容所有触摸设备:iPad,Android平板电脑,W

自定义浏览器滚动条样式

为了有助于理解IE中滚动条样式的控制,你可以查看如下的图片: 经过不断的测试发现,在Win8 下面,有一部分样式都起着相同的作用.估计是因为在Win8中扁平化的界面设计而重新定议了系统中滚动条!以下是Win 8下面的滚动条样式,并写出了和CSS支持的情况: 以上所写的几个四个CSS属性,足以控制Win 8系统下,IE浏览器的滚动条样式了.但经过测试,发现,其它的四个属性仍然支持(主要是在以上几个属性空缺时,就会体现其作用).具体如下: 关于scrollbar-track-color,scroll

修改浏览器滚动条样式

滚动条样式修改,没有找到修改火狐浏览器滚动条的代码 把以下样式加入css,图片为谷歌.safari.qq浏览器.360浏览器滚动条样式和ie滚动条样式及ie原始默认样式 /*谷歌.safari.qq浏览器.360浏览器滚动条样式*/ /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-web