7+最佳自定义浏览器滚动条JavaScript和jQuery插件

本文概述

• 7. Tinyscrollbar
• 6. jQuery slimScroll
• 5. Enscrollplugin
• 4. jScrollPane
• 3. Perfect scrollbar
• 2. Nice scroll
• 1. jQuery scrollbar

滚动条是你无法使用css随意定制的窗口的唯一组件(至少在Firefox中不是这样, 例如Opera等), 因此你需要使用Javascript实现此功能。

但是有很多选择可以传递给我的设计？请参阅我们的7个用Javascript或jQuery编写的最佳滚动条插件集合。

7. Tinyscrollbar

Github |演示版

Tiny Scrollbar是一种出色而优雅的方法, 可以在移动和台式设备上滚动内容。它被设计为动态的轻量级实用程序。此外, 它为用户界面设计人员提供了一种增强网站Ui(用户界面)的强大方法。

它以香草Javascript microlib和jQuery插件的形式编写。

jQuery插件和纯Javascript microlib之间对浏览器的支持有所不同。具体来说, 纯Javascript microlib不支持IE6-8等旧版浏览器。如果需要支持这些浏览器, 请使用jQuery插件版本。

• iOS和Android支持。
• 作为jQuery插件和普通Javascript microlib提供。
• AMD, Node, requirejs和commonjs支持。
• 可以垂直或水平滚动。
• 支持滚轮, 拇指, 轨迹或触摸滚动。
• 它具有更新方法, 因此可以处理(异步)内容更改。
• 轨迹和拇指的大小可以设置为自动或固定数字。
• 易于定制。
• 支持普通滚动和移动样式反向滚动。
• 通过下载zip或此处, 可以在此页面上看到示例。
• 轻巧, 简洁的代码。

6. jQuery slimScroll

Github |演示版

slimScroll是一个小型(4.6KB), 可自定义的jQuery插件, 可将任何div转换为具有漂亮滚动条的可滚动区域-类似于Facebook和Google最近在其产品中开始使用的一种。 slimScroll不占据任何视觉空间, 因为它仅出现在用户启动的鼠标悬停时。用户可以拖动滚动条或使用鼠标滚轮更改滚动值。

5. Enscrollplugin

Github |演示版

Enscroll是一个jQuery插件, 可让你用自己设计的滚动条替换由网络浏览器渲染的滚动条。可以用自己的图像替换滚动条, 也可以使用自定义CSS对其进行样式设置。

4. jScrollPane

Github |演示版

jScrollPane是凯尔文·勒克(Kelvin Luck)的跨浏览器jQuery插件, 它将浏览器的默认滚动条(在具有相关溢出属性的元素上)转换为HTML结构, 可以使用CSS轻松对其进行换肤。

jScrollPane旨在灵活但非常易于使用。在将相关文件下载并包括在文档的开头之后, 你所需要做的就是调用一个javascript函数来初始化滚动窗格。你可以使用CSS轻松设置结果滚动条的样式, 或从现有主题中进行选择。有许多不同的示例展示了jScrollPane的不同功能, 并提供了许多获得支持的方法。

3. Perfect scrollbar

Github |演示版

perfect-scrollbar是简约的滚动条插件, 也可以与jQuery或香草JavaScript一起使用。

• perfect-scrollbar有一些要求, 但不会更改或在原始元素上添加任何样式。
• perfect-scrollbar设计为不具有宽度或高度。它固定在容器的右侧和底部。
• 你几乎可以更改滚动条的所有CSS样式。滚动条设计与脚本无关。
• perfect-scrollbar支持”更新”功能。每当你需要更新滚动条的大小或位置时, 只需更新即可。
• 另外, perfect-scrollbar使用’scrollTop’和’scrollLeft’, 而不是绝对定位或混乱的东西。
• perfect-scrollbar在基于WebKit和基于Gecko的浏览器上均完美支持RTL。

2. Nice scroll

Gtihub |演示版

Nicescroll 3是一个jQuery插件, 用于具有非常相似的ios /移动样式的漂亮滚动条。也支持水平滚动条, 这是一种易于使用的解决方案, 具有与destkop, 平板电脑和电话设备兼容的自定义滚动条。它支持div, iframe, textarea和文档页面(正文)滚动条。

• 安装和激活简单, 无需修改代码即可使用。
• 非常时尚的滚动条, 不会占用你的窗口(原始浏览器滚动条需要一些页面空间, 并减小了窗口/ div的可用宽度)。
• 你可以设置主文档滚动条(正文)的样式。
• 在所有浏览器上, 你可以滚动：拖动光标, 鼠标滚轮(可自定义速度), 键盘导航(光标键, 上翻/下翻键, 返回/结束键)。
• 滚动很流畅(与现代平板电脑浏览一样), 速度是可自定义的。
• 缩放功能。
• 硬件加速滚动(如果可用)。
• 动画框架支持平滑滚动和节省CPU。
• 具有滚动动量的拖动滚动模式(作为触摸设备)。
• 已针对所有主流浏览器的桌面版和移动版进行了测试。
• 支持触摸设备。
• 支持多输入设备(带有MSPointer的IE10)。
• 与许多其他浏览器兼容, 包括IE6, Mac上的Safari和WP7 Mango。
• 酒吧的高度可定制的方面。
• 本机滚动事件仍在工作。
• 与jQuery完全集成。
• 与jQuery UI, jQuery Touch, jQuery Mobile兼容。

1. jQuery scrollbar

Github |演示版

jQuery scrollbar是跨浏览器的CSS可定制滚动条, 具有高级功能：

• 易于实现。
• 没有固定的高度或宽度。
• 响应式设计支持。
• CSS可定制。
• 标准滚动行为。
• 垂直, 水平或两个滚动条。
• 自动重新初始化滚动条。
• 外部滚动条支持。
• 浏览器支持：IE7 +, Firefox1, Opera, Chrome, Safari。
• jQuery scrollbar作为Angular.JS指令。
• Textarea滚动条。
• 页面地图功能。

如果你认为我们忘记了另一个很棒的滚动条插件, 请在评论框中与我们分享。