如何使用 jScrollPane 使自定义滚动条始终可见？答案

【问题标题】：How do I make custom scrollbars with jScrollPane to be always visible?如何使用 jScrollPane 使自定义滚动条始终可见？
【发布时间】：2010-07-25 00:27:40
【问题描述】：

我有使用 jQuery 的 jScrollPane 插件的滚动条。

滚动条有效，所有内容都使用 AJAX，因此对于每次“页面”加载，我都会添加滚动条的重新初始化。但是当内容比页面短时，滚动条是不可见的。

这会导致内容有 10 像素的额外空间，这对于使用 100% 可用空间的项目来说很烦人。

任何人知道如何使滚动条可见，即使内容不可用？或者另一种保留空间的 CSS 方式也可以。

【问题讨论】：

标签： jquery css jquery-plugins jquery-jscrollpane

【解决方案1】：

如果没有人找到更好的解决方案，

我已经可以说我修改了 jScrollPane 插件，以始终显示“轨道”栏，如果它要隐藏滚动条（因为内容小于视图），我也不会附加“拖动”栏。虽然它不是一个非常干净的选择。

应该更进一步，并且禁用/重新启用向上向下按钮，添加 css 功能以在禁用时不执行悬停/活动状态...以提高可用性。

仍然期待一个可能的更好的解决方案，虽然我觉得我会想出唯一可能的解决方案，因为可能没有开箱即用的解决方案

【讨论】：

【解决方案2】：

我认为在将这个功能添加到 jScrollPane 之前，只有一些肮脏的技巧可以解决这个问题。我所做的是询问 jScrollPane 是否启用了滚动；如果没有，我添加了一个看起来像空/禁用滚动条的 div。这是代码：

var scrollPane = $("#id-of-scroll-area");
scrollPane.css("height", "100%"); // I needed this; you may not
var scroll = scrollPane.jScrollPane();
// check if scrolling is enabled
if (!scroll.data('jsp').getIsScrollableV()) {
  scrollPane.css("overflow-y", "hidden");
  scrollPane.css("width", leftPane.width() - 10); // 10 is width of scroll bar
  scrollPane.after('<div id="white-v-bar">&nbsp;</div>');   
}

希望这对某人有帮助... 马库斯

这是虚拟滚动条的 CSS：

#white-v-bar {
 height:100%;
 width:10px;
 background-color:white;
 float:left;
}

【讨论】：