自定义JQuery滚动条插件

Question

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

谢谢。

Answer 1

我是插件作者。

该脚本需要适应实际的滚动条元素，因此默认情况下需要有一个空白（否则滚动条将出现在您内容的顶部）。

插件将滚动条添加到应用滚动条的元素内 （用于调用mCustomScrollbar函数的div）。 它被添加在其内部而不是其父元素上，因为脚本可能无法知道您的父元素是什么。

添加的边距存在于CSS文件中，因此您可以轻松地对其进行更改，删除等。 只需编辑jquery.mCustomScrollbar.css，您将在最顶部找到它：

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

更改/删除边距权利属性为所需的任何内容。

此外，滚动条元素容器（.mCSB_scrollTools）的位置绝对正确，因此您可以将其放置在所需的任何位置：

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

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

所有滚动条设计均通过CSS完成。 在插件主页的 “样式化滚动条”部分下，还有所有滚动条标记的可视化表示，以方便参考。

Answer 2

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