gromo / jquery.scrollbar

jQuery CSS Customizable Scrollbar
GNU General Public License v2.0
755 stars 237 forks source link

overflow-x: hidden IE problem #112

Open k-one-o-two opened 7 years ago

k-one-o-two commented 7 years ago

I've changed CSS a bit, adding

.scroll-wrapper>.scroll-content.scroll-hide-x {
            overflow-x: hidden !important;
        }

without this mod horizontal scroll-bar blinks when my div appears (using angular's ng-show).

Now there is a problem: scroll never gets to the bottom, i.e. top + height never equals max-height. Please, see the image attached. scroll As seen - IE adds margin-bottom to the style. I've fixed the problem adding

if (browser.msedge || browser.msie) {
            var marginBottom = parseInt(c.css('margin-bottom'));
            scrollTop = scrollTop - marginBottom;
          }

to c.on('scroll' + namespace, function (event) { function. This is an issue but not a PR since I'm not sure my fix is correct.

Can it be fixed some better way?

gromo commented 7 years ago

If you use overflow-x: hidden !important, update function getBrowserScrollSize in jquery.scrollbar.js:

    return {
        height: Math.ceil((browser.data.outer.offset().top - browser.data.inner.offset().top) || 0),
        width: Math.ceil((browser.data.outer.offset().left - browser.data.inner.offset().left) || 0)
    };

change to

    return {
        height: 0,
        width: Math.ceil((browser.data.outer.offset().left - browser.data.inner.offset().left) || 0)
    };
k-one-o-two commented 7 years ago

Thanks, I'll give it a try

k-one-o-two commented 7 years ago

Tried this: it works, but only if I add this style (overflow-x: hidden) to all elements on which I use the scrollbar and it's not a good idea. So, I think that my solution is better - I'll modify it a bit and make a PR then.