带有 jQuery 的狮子式滚动条?
有谁知道一个 jQuery 插件可以为每个浏览器制作 Mac OS X Lion 风格的滚动条?
编辑:这是供 Windows 用户使用的图像
Does anyone know a jQuery plugin that makes Mac OS X Lion style scrollbars for every browser?
Edit: Here's an image for Windows users
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(10)
有趣的东西,我写了一个插件就是这样做的。它称为 LionBars。
Interesting stuff, I wrote a plugin that does just that. It's called LionBars.
Antiscroll 可能是可用的最佳插件之一在每个浏览器中重新创建 Mac OS X Lion 滚动条。
Antiscroll 的一些伟大功能:
演示:http://automattic.github.io/antiscroll/
Antiscroll is probably one of the best plugins available that recreates Mac OS X Lion scrollbars in every browser.
Some of the great features of Antiscroll:
Demo: http://automattic.github.io/antiscroll/
nanoScroller.js 是一个使用 Coffeescript 编码的 jQuery 插件,它的作用是:http://jamesflorentino.github.com/nanoScrollerJS/
nanoScroller.js is a jQuery plugin that coded with Coffeescript and it makes its job: http://jamesflorentino.github.com/nanoScrollerJS/
Lion 发布那天,我非常喜欢操作系统中的滚动条。浏览器已经有一个光滑的默认滚动条,但我想 Windows 用户怎么样;)。
它仍在建设中,但可能会帮助您:OSX Scroll
基于 tinyscrollbar 但我做了一些调整。您可以启用自动隐藏(就像在操作系统中一样)。只需看一下源文件即可。
希望有帮助。
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 ;).
It is still under construction but it might help you out: OSX Scroll
Based on tinyscrollbar but I made some adjustments. You can enable autohide (like in the OS). Just have a look at the source files.
Hope it helps.
scrollpane Jquery 插件是最接近的。
请参阅菱形演示。
为了使其更像 Lion,您可以将其自定义为仅在轨道 div 悬停在上方时显示栏,并确保使用
animateEase
函数。哦,为了额外的苹果善良,改变滚动的方向,这样向下就是向上,向上就是向下:-)
The scrollpane Jquery Plugin is the closest you'll get.
see the lozenge demo.
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
animateEase
function.Oh and for extra Apple goodness change the direction of the scroll so down is up and up is down :-)
这是一个老问题..但也许有人仍然对我的版本感兴趣:
来源: https ://github.com/pixelass/customScrollBar
示例: http://pixelass.github.io/customScrollBar/
这个插件实际上比 antiscroll 或 Nicescroll 等更精确地复制滚动条。
该插件允许完全控制在滚动条上(当前仅垂直)并且不需要 mousewheel.js (像大多数插件一样)
消除这种依赖性是我的版本的主要目标。
它还监听滚动事件(与反滚动一样)。
我发现的所有其他插件都缺少滚动条上的淡入和悬停调整大小。我的版本包含一个示例来展示如何实现这种效果。
有可选的(伪)事件侦听器“scrollEnded”“clicked”,当用户滚动结束或单击滚动条拇指时会触发它们。
该插件还允许几乎任何可以想象的滚动条样式和设置,如单击箭头(向上向下箭头)。
Alpha
这仍然是 alpha(发布时间),但随着时间的推移,开发将继续。
This is an old question.. but maybe someone is still interested in my version:
Source: https://github.com/pixelass/customScrollBar
Example: http://pixelass.github.io/customScrollBar/
This plugin actually replicates the scrollbar more precisely than antiscroll or nicescroll.. etc.
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.
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.
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.
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.
使用我的插件: scrollYou
它使用一种简单的方法在自己的元素内进行滚动。因此,您不必添加更多元素来使其滚动。
Use my plugin: 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.
nanoscroller
或nicescroller
将是平滑滚动的更好选择。nanoscroller
ornicescroller
would be a better option for smooth scrolling.这个有像 Mac 上的滚动条,而且安装非常简单。基本上你可以用 css 应用任何你喜欢的皮肤。
This one has scroll bars like the ones on Mac and is very simple to install. You can basically apply any skin you like with css.
jScrollPane 加上一点点修改就可以了。
这是一个关于它。
jScrollPane plus a little bit of modification would do.
This is a tutorial about it.