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

Question

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

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

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

有人知道如何在内容不可用时使滚动条可见吗？ 或者使用替代的 CSS 方式来保留空间也可以。

Answer 1

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

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

应该进一步采取措施，并禁用/重新启用向上向下按钮，添加 css 功能，以便在禁用时不执行悬停/活动状态...以获得更好的可用性。

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

Answer 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"> </div>');   
}

希望这可以帮助某人......
Markus

这是虚拟滚动条的 CSS：

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