jScrollPane：删除滚动条装订线？

Question

我希望将滚动条放置在内容上方，而不是在其旁边强制放置一个装订线。

在附图中，您可以看到它当前对红色滚动条的作用...它创建了一个垂直装订线，将内容推到一边。

但我想做的是底部的内容......将滚动条定位在内容上方。

我尝试过绝对定位 .jspVerticalBar 但我无法摆脱排水沟。

编辑：这是问题的 jsFiddle：http://jsfiddle.net/8Mebt/3/ -- 正如你所看到的，最右边仍然有一个间隙，项目的“选定”状态并没有像我想要的那样一直延伸。

Answer 1

.jspVerticalBar 已经绝对定位。将其 right 属性设置为您想要的，并设置

.jspHorizontalBar, .jspVerticalBar, .jspTrack {
    background: none repeat scroll 0 0 transparent;
}

为使装订线的背景（在 jscrollpane 中称为轨道）透明。

演示位于 http://jsfiddle.net/gaby/DsDQP/

---

更新

评论后（ 包括a jsfiddle）这是我的解决方法。

将 verticalGutter 设置设置为 0 并重新计算 jspPane 的宽度以包含 jspTrack 宽度。

$('.scroll-pane').jScrollPane({verticalGutter:0});
$('.jspPane').css({width:'+=' + $('.jspTrack').width()});

演示位于 < a href="http://jsfiddle.net/gaby/DsDQP/8/" rel="nofollow">http://jsfiddle.net/gaby/DsDQP/8/

每次重新初始化后都需要调用重新计算..

这是必需的，因为 jspPane 的宽度（内容）是通过 javascript 通过计算容器宽度并删除 verticalGutter 和 添加的。 jspTrack 宽度。您也可以使用 CSS 重新定义宽度，并使用 !important 指令覆盖通过 javascript 添加的宽度，如评论中提到的 @Evgeny 。

Answer 2

您可以在 jScrollPane 初始化时设置一个负的 verticalGutter 值，它就会完成任务，无需其他操作。

$('.scroll-pane').jScrollPane({verticalGutter:-100})

http://jsfiddle.net/DsDQP/50/

Answer 3

您可以尝试这样做......

    //Should it (the #parentContainer) have had a "scroll-pane" class

        $('#parentContainer').jScrollPane()

    $.each(data, function(i, value) {

//Detach scrolling capabilities
        $('#parentContainer').jScrollPaneRemove();

        $('<div/>',{
        class:'anyClass',
        id:'anyId'
        })
        .appendTo(#childContainer);

//Return back Scrolling capabilities to the parent container    
        $('#parentContainer').jScrollPane();            


        ///-> Loop Ends
                });

这样，每次循环时都会更新滚动功能......因此 ScrollBar 的长度将根据子容器中数据存储的大小而增加或缩小。

希望有帮助......

埃贝斯特