Как вылечить скроллбар в jquery custom content scroller?

Question

[Артур Кох]

Использую сабжевый плагин для кастомного скроллбара на странице. После изменения размера окна, и следовательно области скроллинга, плагин не пересчитывает значения высоты/ширины блока для расчета скролла.



Пробовал так:

$(document).ready(function(){<br>
           $('#main').mCustomScrollbar();<br>
 });<br>
$(window).resize(function(){<br>
          $('#main').mCustomScrollbar();<br>
});<br>

Но это лишь добавляет кучу новых скроллов для блока не убирая старого. Я бог бы «ручками» убирать старый скролл на ресайзе окна, но не тут то было. Вешая скролл на блок, плагин создает свою сложную обертку для блока контента.



upd: Нашел параметр advanced: updateOnContentResize: true, который это должен делать, но делает он это «коряво». Пересчет происходит не по событию ресайза блока, а уже после, когда юзер «докрутит» скроллбар до нужного места. Да и работает это не всегда аккуратно.



upd 2: При использовании updateOnBrowserResize: true все работает более менее сносно, но при открытии инспектора в том же хроме пересчет идет наперекосяк.



Поиграться можно тут



Кто имел дело с этим? Подскажите.

Answer 1

[dobeer]

У custom content scroller есть параметр updateOnContentResize, поставьте его в true, когда цепляете Scroll, вот так:

$('#main').mCustomScrollbar({ advanced:{updateOnContentResize:true} });

Comments

[Артур Кох]

Да, спасибо, уже разрешил этот вопрос с разработчиком на гитхабе.

Answer 2

[Keyten]

Лучше используйте jScrollPane.

Comments

[Артур Кох]

Сразу вопрос насчет jScrollPane. Tcnm есть возможность управления скроллом с клавиатуры? Есть возможность запомнить положение скролла и вернувшись на страницу оказаться в той же позиции?

[Keyten]

С клавиатуры — насколько я знаю, есть. Если и нету, то реализовать несложно.

Запомнить положение скролла — тоже очень несложно реализуется.

[Артур Кох]

Да, спасибо, уже курю мануал по плагину.

Answer 3

[Keyten]

А вообще у плагина нету функции типа destroy, которая его отключает?

Comments

[Артур Кох]

Написал разработчику на хитхабе. updateOnBrowserResize прекрасно работает с fluid блоками. Для фиксированных(с пересчетом на js) он мне предложил $('#main').mCustomScrollbar(«update»);, но работает с багами. Использую fluid layout и все ок.

Answer 4

[afires]

ограничьте блок через css и будет Вам счастья, если скролл - Вы поставили высоту 40vw то и внешний див должен быть таким же а так идет подключение скрипта без стилей в начале вот и скачет высота скрипт подключился встает на место - правильно я Вас понял? так вот что бы не скакал ограничьте и стелем что бы так же работал без скрипта и в итоге не будет косяков у Вас.. если не правильно понял вопрос поправьте примером и скрином я не умею видеть через пространство даже доктору требуются анализы :)

<div class="mCustomScrollbar content fluid light" data-mcs-theme="inset-2-dark" style="height:86%;width:76%;overflow: hidden;">

тут ограничить его стилем overflow: hidden; вот этот параметр важен отключит прыгание и подстройку... вот это height:86%;width:76%; дает четко понять как его рисуем то есть его размеры и не надо не чего выдумывать ..