如何自定义 jquery.perfect-scrollbar 的外观？答案

【问题标题】：How does one customize the appearance of jquery.perfect-scrollbar?如何自定义 jquery.perfect-scrollbar 的外观？
【发布时间】：2025-11-25 20:10:02
【问题描述】：

我正在使用jquery.perfect-scrollbar，它提供了 10.8+ 的 Mac OS X 滚动条的出色模拟——虽然the author has claimed 提供了一种可以被 CSS 欺骗的方法，但我不知道如何正确实现他假定支持的任何美学增强。

我希望激活“可见导轨”——无论悬停状态如何，都在 sutu 中显示滚动条——并为其在页面上的上下文设置适当的样式。强>

目前，除非悬停状态处于活动状态，否则它是不可见的——在这种情况下，它的外观如下：

这是完美滚动条源 CSS，来自 the commit 到 this particular issues’ 关闭的 GitHub 拉取请求暗指：

https://github.com/noraesae/perfect-scrollbar/blob/2222ec5e9109b1f4c4864e65602ba20055f8afc1/src/perfect-scrollbar.css#L16

...我找不到任何对完美滚动条的 jQuery API 的调用来促进这一点，也找不到任何如何使用 CSS 对其进行样式设置的示例。

如果有人对此有任何实际的、非推测性的经验——或者更好的是我可以指出的现场工作示例——那将特别有帮助。

【问题讨论】：

我有点困惑——到目前为止你尝试过什么？大概你在你的项目中包含了perfect-scrollbar.css 文件......为什么不简单地用你想要的样式相应地更新它呢？或者将更高特异性的样式添加到您自己的样式表中，以覆盖perfect-scrollbar.css 中的样式？我可以在 Chrome 开发者工具检查器中轻松编辑它。
另外，没有冒犯的意思，但是像 19 世纪的贵族那样说话并不能真正帮助人们理解你的问题。
我确实包含了 CSS - 当我尝试编辑 .ps-scrollbar-x-rail 类时，我可以看到滚动条背景的错误版本飞出滚动区域并在以下情况下错误地收缩该栏被滚动（通过抓住它或使用鼠标滚轮）......这就是为什么我特别希望看到一个工作风格的例子。
您能否设置一个JSFiddle 来复制您的问题？最好将插件 CSS 直接包含在小提琴中，而不是链接到外部文件，因为如果我们可以修改该 CSS，我们将更容易排除故障并提出解决方案。
您需要更改不透明度和过滤器：alpha(opacity) 并设置不带 :hover 和 .hover 的规则 http://jsfiddle.net/jbxXN/

标签： javascript jquery css jquery-plugins scrollbar

【解决方案1】：

正如 Abraham Uribe 指出的那样，您可以通过更改不透明度来实现这一点。如果你只想改变一个特定的滚动条而不改变你的 CSS，你可以使用 jQuery 让你的 y-rail 可见：

$("#YOU_DIV_ID").find(".ps-scrollbar-y-rail").css({"opacity":0.5});

或

$("#YOU_DIV_ID").find(".ps-scrollbar-x-rail").css({"opacity":0.5});

让您的 x-rail 可见）。

【讨论】：

谢谢——这绝对是我一直在寻找的直接答案。祝你好运！