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 【7+最佳自定义浏览器滚动条JavaScript和jQuery插件】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和文档页面(正文)滚动条。