Javascript 带有 jQ​​uery 的类似狮子的滚动条？

Lion-like scrollbar with jQuery?

提问by trnc

Does anyone know a jQuery plugin that makes Mac OS X Lion style scrollbars for every browser?

有谁知道一个 jQuery 插件可以为每个浏览器制作 Mac OS X Lion 风格的滚动条？

Thanks in advance.

提前致谢。

Edit:Here's an image for Windows users

编辑：这是 Windows 用户的图像

采纳答案by Nathan

Antiscrollis probably one of the bestplugins available that recreates Mac OS X Lion scrollbars in every browser.

Antiscroll可能是最好的插件之一，可以在每个浏览器中重新创建 Mac OS X Lion 滚动条。

Some of the greatfeatures of Antiscroll:

Antiscroll 的一些重要功能：

1. Fades in and out
2. Size of container can be dynamically adjusted and scrollbars will adapt
3. Supports mousewheels, trackpads, other input devices natively
4. Shows scrollbars upon hovering
5. Supports IE7+, Firefox 3+, Chrome, Safari, Opera

1. 淡入淡出
2. 容器的大小可以动态调整，滚动条会适应
3. 原生支持鼠标滚轮、触控板、其他输入设备
4. 悬停时显示滚动条
5. 支持IE7+、Firefox 3+、Chrome、Safari、Opera

Demo: http://automattic.github.io/antiscroll/

演示：http: //automattic.github.io/antiscroll/

回答by Nikolay Dyankov

Interesting stuff, I wrote a plugin that does just that. It's called LionBars.

有趣的东西，我写了一个插件来做到这一点。它被称为LionBars。

回答by Murat ?orlu

nanoScroller.jsis a jQuery plugin that coded with Coffeescript and it makes its job: http://jamesflorentino.github.com/nanoScrollerJS/

nanoScroller.js是一个用 Coffeescript 编码的 jQuery 插件，它完成了它的工作：http://jamesflorentino.github.com/nanoScrollerJS/

回答by Mazatec

The scrollpaneJquery Plugin is the closest you'll get.

在滚动窗格jQuery插件是你会得到最接近的一次。

see the lozengedemo.

见锭剂演示。

To make it more like Lion, you could customize it to only show the bar when the track div is hovered over and ensure you use the animateEasefunction.

为了使它更像 Lion，您可以自定义它以仅在轨道 div 悬停时显示栏并确保您使用该animateEase功能。

Oh and for extra Apple goodness change the direction of the scroll so down is up and up is down :-)

哦，为了额外的 Apple 善良改变滚动的方向所以向下是向上和向上是向下 :-)

回答by FinchSol

The day Lion was released I was very fond of the scrollbar in the OS. The browsers already have a slick default scrollbar but I thought how about them Windows users ;).

Lion 发布的那天，我非常喜欢操作系统中的滚动条。浏览器已经有一个光滑的默认滚动条，但我想 Windows 用户怎么样;)。

It is still under construction but it might help you out: OSX Scroll

它仍在建设中，但它可能会帮助你：OSX Scroll

Based on tinyscrollbarbut I made some adjustments. You can enable autohide (like in the OS). Just have a look at the source files.

基于tinyscrollbar但我做了一些调整。您可以启用自动隐藏（就像在操作系统中一样）。只需查看源文件即可。

Hope it helps.

希望能帮助到你。

回答by FinchSol

This is an old question.. but maybe someone is still interested in my version:

这是一个老问题..但也许有人仍然对我的版本感兴趣：

Source:https://github.com/pixelass/customScrollBar

来源：https : //github.com/pixelass/customScrollBar

Example:http://pixelass.github.io/customScrollBar/

示例：http : //pixelass.github.io/customScrollBar/

This plugin actually replicates the scrollbar more precisely than antiscroll or nicescroll.. etc.

这个插件实际上比 antiscroll 或 nicescroll 更精确地复制滚动条......等。

The plugin allows full control over the scrollbars (currently only vertical) and does not require mousewheel.js (as most plugins do) Removing this dependency was the main goal of my version.

该插件允许完全控制滚动条（目前仅垂直）并且不需要 mousewheel.js（大多数插件都这样做） 删除这种依赖是我的版本的主要目标。

It also listens to the scroll event (as antiscroll does). The fade-in and hover resize on the scrollbars were missing on all other plugins I found. My version includes an example to show how to achieve this effect.

它还侦听滚动事件（就像 antiscroll 一样）。我发现的所有其他插件都缺少滚动条上的淡入和悬停调整大小。我的版本包含一个示例来展示如何实现这种效果。

There are optional (pseudo-)event-listeners "scrollEnded" "clicked" which are fired when the user's scroll has ended or when the scroll-bar-thumb is clicked.

有可选的（伪）事件侦听器“scrollEnded”“clicked”，它们在用户滚动结束或单击滚动条拇指时触发。

This plugin also allows almost any imaginable style and setting of the scrollbar, as click-arrows (up-down-arrows).

该插件还允许滚动条的几乎任何可以想象的样式和设置，如点击箭头（上下箭头）。

Alpha

Α

This is still alpha (time of posting) but development will continue as time passes.

这仍然是 alpha（发布时间），但随着时间的推移，开发将继续进行。

回答by silviomoreto

Use my plugin: scrollYou

使用我的插件：scrollYou

It uses a simple approach to make the scroll inside the own element. So you dont have to add more elements to make it roll.

它使用一种简单的方法在自己的元素内进行滚动。所以你不必添加更多的元素来让它滚动。

回答by mattie

Thisone has scroll bars like the ones on Mac and is very simple to install. You can basically apply any skin you like with css.

这个有滚动条，就像 Mac 上的滚动条一样，安装起来非常简单。您基本上可以使用 css 应用您喜欢的任何皮肤。

回答by roxes

jScrollPane plus a little bit of modification would do.

jScrollPane 加上一点点修改就可以了。

Thisis a tutorial about it.

这是一个关于它的教程。

回答by Ayush Rastogi

nanoscrolleror nicescrollerwould be a better option for smooth scrolling.

nanoscroller或者nicescroller是平滑滚动的更好选择。