search

malihu / malihu-custom-scrollbar-plugin

Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
http://manos.malihu.gr/jquery-custom-content-scroller
MIT License
4.11k stars 1.51k forks source link

With jQuery 3.5.0 and higher a visual problem occurs #652

Closed luciminea closed 4 years ago

luciminea commented 4 years ago

If I use jQUery 3.5.0 or above, the plugin works, but the scrollbar container, that is supposed to be fixed and occupy all height of the element, is now scrolling with the scrollbar, just under the scrollbar.

I've downgraded to jQuery 3.4.1 and it's working as supposed.

I've placed two pictures, one with the 3.4.0 and the other with the 3.5.0.

This is the 3.5.0 behaviour

abnormal-3d

This is the 3.4.1 behaviour

normal-3d

nns52k commented 4 years ago

The horizontal scrollbar has the same problem.

jinixx commented 4 years ago

Fixed it on my fork. Feel free to use. https://github.com/jinixx/malihu-custom-scrollbar-plugin/

luciminea commented 4 years ago

Yes, it's working correctly now ! Thank you very much !

gvereido commented 4 years ago

@jinixx thank you for the fix - it fixed this vertical scrollbar issue. It seem like new issue created with the horizontal scrollbar. First - left and right buttons disappeared. Width and max-width are calculated wrong. Second - the horizontal scrollbar drawn inside the div of the vertical scrollbar.

The code looks like this:

<div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark-3 mCSB_scrollTools_vertical" style="display: block;"> <a href="#" class="mCSB_buttonUp" style="display: block;"/> <div class="mCSB_draggerContainer"> <div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; display: block; height: 76px; max-height: 723px; top: 0px;"> <div class="mCSB_dragger_bar" style="line-height: 30px;"/> </div> <div class="mCSB_draggerRail"/> <div id="mCSB_2_scrollbar_horizontal" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark-3 mCSB_scrollTools_horizontal" style="display: block;"> <div class="mCSB_draggerContainer"> <div id="mCSB_2_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 30px; display: block; width: 10px; max-width: 6px; left: -2px;"> <div class="mCSB_dragger_bar"/> </div> <div class="mCSB_draggerRail"/> </div> </div> </div> <a href="#" class="mCSB_buttonDown" style="display: block;"/> </div>

shakirmsr commented 1 year ago

thanks, @jinixx. It worked