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

您可以verticalGutter在jScrollPane初始化时放置一个负值,它将完成这一操作,无需其他操作.

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

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