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

Posted 2023-02-21

【中文标题】带有 jQ​​uery 的类似狮子的滚动条？

【英文标题】：Lion-like scrollbar with jQuery?

【发布时间】：2011-10-15 09:05:23

【问题描述】：

有没有人知道一个 jQuery 插件可以为每个浏览器制作 Mac OS X Lion 样式的滚动条？

提前致谢。

编辑：这是一张供 Windows 用户使用的图片

【问题讨论】：

@coreyward 实际上，有时它确实是更好。例如：它节省空间。某些操作系统的滚动条更粗（如 Windows）并占用空间。 Lion 滚动条不占用任何空间。这是使用它的正当理由。所以，不，这不仅仅是“视觉偏好”，而是在您需要滚动条不占用任何空间的情况下节省空间。不确定您所说的 “这是经验教给您的” 是什么意思，但如果您说我没有经验，那您就错了。

@coreyward 我们都不会同意这一点，所以让我们同意不同意。我知道我也不孤单。

@coreyward 另外我只是想补充一点，无论滚动条是不是原生滚动条，你仍然以同样的方式滚动它。

@coreyward 似乎您根本不​​愿意增强用户体验。人们并不傻，他们知道滚动条长什么样。如果它们看起来与默认窗口不同，并且它与站点样式内联，那么 imo 会更好。

【参考方案1】：

scrollpane Jquery 插件是您最接近的插件。

查看lozenge 演示。

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

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

【参考方案2】：

Lion 发布那天，我非常喜欢操作系统中的滚动条。浏览器已经有一个漂亮的默认滚动条，但我认为它们是 Windows 用户；）。

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

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

希望对你有帮助。

【参考方案3】：

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

【讨论】：

谢谢！我很高兴人们发现它很有用。

花了 1.5 小时试图弄清楚我做错了什么。看起来脚本不喜欢任何

您可能想在github.com/nikolaydyankov/lionbars 试用新版本 - 更强大的支持（甚至是 IE8）

@NikolayDyankov：应该如何使用 LionBars .3 使其也适用于 iframe？ $("iframe").lionbars(); 似乎不起作用。

链接似乎已经坏了，404 等等。任何想法这个插件/项目发生了什么？

【参考方案4】：

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

【讨论】：

截至 2012 年 12 月，此插件似乎不支持水平滚动条。

+1 非常易于使用和自定义。这也是这里最新/最频繁更新的插件

在我对此处列出的插件的 IE7/IE8 测试中，nanoScroller 就在那儿 - 即将在我的下一个项目中使用它。

【参考方案5】：

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

This 是一个关于它的教程。

【参考方案6】：

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

【参考方案7】：

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

Antiscroll的一些伟大功能：

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

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

【讨论】：

尽管出于某种原因我无法在我的网站上使用它：p 独立工作。我想我有另一个插件干扰。

Chrome 25.0 的演示甚至对我来说都失败了。显示默认滚动条。

@MrAzulay 是的，自从最新的 Chrome 更新以来，这种情况才刚刚开始。希望开发者能尽快修复它。

我刚刚创建了一个插件，它允许复制具有较少依赖性的狮子滚动条。 （仍然是阿尔法）。在这里查看我的答案：***.com/questions/6863748/… .. 它也不会在悬停时显示滚动条，而是在滚动处于活动状态时（如原生狮子滚动）pixelass.github.io/customScrollBar 它还允许任何其他样式

Safari 8 上的双滚动条。

【参考方案8】：

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

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

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

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

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

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

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

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

阿尔法

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

【讨论】：

非常不错的插件！它就像山狮滚动条一样。我喜欢你如何让滚动条变大，并添加一个滚动轨道，就像你将鼠标悬停在它上面时原生的 Mountain Lion 滚动条所做的那样。

感谢您的评论。我实际上要扩展插件一点。添加方法、事件并提供一些主题。它实际上只是一个滚动条插件。狮子造型只是一个演示主题，目前在 index.html 中硬编码。但我想它适用于演示。当内容太长时，它有点错误。当滚动因子大于 5 或​​ 6 时，滚动条移动得太远。我也可能会尝试添加弹性滚动（毕竟这需要 mousewheel.js）作为选项（如在 lion-native-apps 中）

我看到你甚至做了一个 Leopard 滚动条主题。不错！

【参考方案9】：

使用我的插件：scrollYou

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

【参考方案10】：

This 具有与 Mac 上类似的滚动条，安装非常简单。你基本上可以用 css 应用你喜欢的任何皮肤。