需要帮助造型jScrollPane

Question

我正在尝试设置我的jScrollPane

但我发现我的滚动条延伸出容器

我该如何解决？代码可以在http://jsfiddle.net/Mfest/

中看到

Answer 1

建议的解决方案是使用.jspCap在轨道上方或下方添加空间，而不是填充或边框。我在这里实现了这个：

http://jsfiddle.net/Mfest/6/

请注意，我将顶部和底部的大小设置为不同的大小，以使事物看起来排列相同 - 我认为圆角/边框可能会使jScrollPane计算有点混乱。

行动中的另一个演示： http://jscrollpane.kelvinluck.com/caps.html

Answer 2

我的答案现在多余，see the below answer。

---

我不知道“正确的jScrollPane方法”，但这在现代浏览器中有效。

问题在于，padding上的border和.jspTrack正在累加，以使滚动条的高度为306px，而不是300px。< / p>

因此，您可以使用.jspTrack上的box-sizing属性：

    /* https://developer.mozilla.org/en/CSS/box-sizing */
    width: 12px; /* adjust width */
    /* support Firefox, Safari/WebKit, Opera and IE8 */
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;

请参阅：http://jsfiddle.net/Mfest/2/

我个人对此答案并不满意，因为这似乎是解决问题的一种方法。

Answer 3

您为padding:2px; .jspTrack添加了滚动条顶部和底部的填充，结果是溢出容器。尝试将其更改为padding:0 2px;。

更新：我也为.jspTrack和.jspDrag设置了固定的高度。

演示： http://jsfiddle.net/Mfest/3/