javascript - 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/

---

更新

在评论（包括 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
                });

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

希望有帮助....

埃贝斯特