logo标签列表

使用jQuery实现类似于MacOS系统中的狮子滚动条？

javascriptjqueryscrollbarosx-lion
49

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

编辑：这里是给Windows用户的图片

输入图片描述

4
不是当特定操作系统的滚动条样式（在这种情况下，是OS X Lion）看起来更好、更适合正在实施的 web 应用程序时。 - Nathan
4
有时候，实际上使用Lion滚动条会更好。例如：它可以节省空间。有些操作系统的滚动条比较粗（像Windows），占用了空间，而Lion滚动条不占用任何空间。这是使用它的一个有效理由。因此，不仅仅是“视觉偏好”，有时还需要在滚动条不能占用任何空间的情况下使用它。不确定你所说的“这是经验教给你的”是什么意思，但如果你是在说我没有经验，那就是错的。 - Nathan
2
@coreyward 我们两个人不会就这件事达成一致，所以让我们承认各自观点的不同。我知道在我的立场上我并不孤单。 - Nathan
2
@coreyward 另外我想补充的是，无论滚动条是否为本机滚动条，您仍然以相同的方式滚动它。 - Nathan
2
@coreyward 看起来你不想提高用户的体验。人们并不傻，他们知道滚动条是什么样子的。如果它们与默认的 Windows 滚动条不同，并且与网站的风格相符，那么在我看来这是更好的选择。 - Jamie Hutber
显示剩余6条评论
10个回答
43

很有趣的东西，我编写了一个插件来实现这个功能。它被称为LionBars。

花了1.5小时试图找出我做错了什么...看起来脚本不喜欢在任何<script>标签中使用"type='text/javascript"。无论如何，非常好的脚本。 - bzx
1
你可能想要尝试一下新版本，网址为https://github.com/nikolaydyankov/lionbars - 支持更多（甚至IE8）。 - Nikolay Dyankov
5
这些链接貌似失效了，出现了404等错误。你有任何想法是这个插件/项目发生了什么事吗？ - peteski
@NikolayDyankov：非常好-谢谢分享-但我无法让它与文本区域一起工作，是否需要特殊/额外的步骤才能实现这一点？ - TheDude
Safari 8上出现了双滚动条。 - bjb568
显示剩余4条评论
42

Antiscroll 可能是可在各种浏览器中重新创建 Mac OS X Lion 滚动条的最佳插件之一。

Antiscroll 的一些 出色 特点：

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

enter image description here

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

1
尽管出于某种原因我无法在我的网站上使其工作，但它可以独立运行。我想可能是另一个插件在干扰。 - Jamie Hutber
这个演示在我的Chrome 25.0上失败了。它显示默认的滚动条。 - Jonathan
@MrAzulay 是的，自从最新的Chrome更新以来，这个问题才开始出现。希望开发者能尽快修复它。 - Nathan
3
我刚刚创建了一个插件，它可以在更少的依赖项下复制狮子滚动条（仍处于Alpha测试阶段）。在这里查看我的答案：https://dev59.com/_mw15IYBdhLWcg3wCnUn 它还不会在悬停时显示滚动条，而是在滚动时活跃地显示（就像本机狮子滚动）。http://pixelass.github.io/customScrollBar/ 它还允许任何其他样式。 - user950658
Safari 8上出现双滚动条。 - bjb568
滚动弹跳效果丢失。 - Kishore Relangi
13
1
截至2012年12月，该插件似乎不支持水平滚动条。 - ErJab
1
+1 非常易于使用和定制。此外，这是此处最新/最频繁更新的插件。 - Philipp
1
在我对这里列出的插件进行IE7/IE8测试时，nanoScroller表现非常出色 - 我打算在我的下一个项目中使用它。 - Prembo
3
当 Lion 操作系统发布时，我非常喜欢其中的滚动条。虽然浏览器已经有了漂亮的默认滚动条，但我想为 Windows 用户提供一种不同的选择。目前该功能仍在开发中，但是它可能会对你有所帮助：OSX Scroll。
基于 tinyscrollbar 进行了一些调整。你可以启用自动隐藏（就像操作系统中一样）。只需查看源文件即可。
希望这有所帮助。
3

scrollpane JQuery插件是目前最接近的选择。

可以查看lozenge演示。

为了使其更像Lion，您可以自定义它，只有在悬停在轨道div上时才显示滚动条，并确保使用animateEase函数。

此外，为了获得额外的苹果优势，将滚动的方向改变，使下面的向上，上面的向下:-)

2

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

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

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

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

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

它还监听滚动事件（就像antiscroll一样）。 在滚动条上的淡入和悬停调整大小在我找到的所有其他插件中都没有。 我的版本包括一个示例，显示如何实现此效果。

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

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

Alpha

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

非常棒的插件！它的表现就像山狮滚动条一样。我喜欢当你将鼠标悬停在上面时，甚至能够使滚动条变大并添加滚动轨迹，就像本地的山狮滚动条一样。 - Nathan
1
谢谢评论。我实际上要进一步扩展插件。添加方法、事件并提供一些主题。它实际上只是一个滚动条插件。lion-styling 只是一个演示主题，目前在 index.html 中硬编码。但我想这对于演示来说是有效的。当内容太长时，它有点小问题。当滚动因子大于 5 或 6 时，滚动条会移动得太远。我可能还会尝试将弹性滚动（这将需要 mousewheel.js）作为选项添加（就像 lion-native-apps 中那样）。 - user950658
我看到你甚至做了一个Leopard滚动条主题。不错！ - Nathan
1

使用我的插件：scrollYou

它采用简单的方法使滚动在自己的元素内部。因此，您无需添加更多元素即可使其滚动。

0

这个有像Mac上的滚动条，非常容易安装。你可以使用CSS应用任何你喜欢的皮肤。

0

只需要对jScrollPane稍作修改就可以了。

这篇文章是关于它的教程。

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接