自定义JQuery Scrollbar插件

Question

我正在为滚动条使用自定义jquery插件，但它会导致内容div调整大小，缩小宽度。检查我附上的屏幕截图。任何评论将不胜感激。

感谢。

Answer 1

我是插件作者。

脚本需要容纳实际的滚动条元素，因此默认情况下，需要有一个边距（否则滚动条会显示在内容的顶部）。

该插件添加滚动条内部应用滚动条的元素（用于调用mCustomScrollbar函数的div）。它被添加到它的内部而不是它的父节点，因为脚本不可能知道你的父元素是什么。

CSS文件中存在增加的边距，因此您可以轻松更改，删除等。 只需编辑jquery.mCustomScrollbar.css，您就可以在最顶层找到它：

.mCSB_container{
    width:auto;
    margin-right:30px;
    overflow:hidden;
}

将margin-right属性更改/删除为您想要的任何内容。

此外，滚动条元素容器（.mCSB_scrollTools）绝对定位，因此您可以将它放在任何位置：

.mCustomScrollBox>.mCSB_scrollTools{
    width:16px;
    height:100%;
    top:0;
    right:0;
}

要在父元素上添加滚动条，只需在父div上调用mCustomScrollbar函数即可。

所有滚动条设计都是通过CSS完成的。在plugin homepage中，在“设置滚动条样式”部分下，还有所有滚动条标记的直观表示，以便于参考。

Answer 2

必须更改我正在使用的滚动条插件，现在我正在使用SlimScroll（https://github.com/rochal/jQuery-slimScroll）。这是唯一没有构建div的滚动条插件，并在容器div中强制它自动调整内容大小。 SlimScroll基于Facebook风格的滚动条，成为父div的一部分。感谢所有要求代码的人！ ：）