jScrollPane：删除滚动条装订线？

Question

我想让滚动条放在内容上，而不是强迫旁边的阴沟。

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

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

我已经尝试过绝对定位.jspVerticalBar，但我无法摆脱阴沟。

编辑：这是问题的解答：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/

演示

---

<强>更新

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

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

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

演示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的长度会根据子容器中数据存储的大小而增大或缩小。

希望有所帮助....

一百假日