自定義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的一部分。 感謝所有要求輸入代碼的人！ :)