jamesflorentino/nanoScrollerJS

getBrowserScrollbarWidth different results based on scroll bar settings

Upperfoot opened this issue · 7 comments

There seems to be a regression for the following issue #51

Tested on various mac's along with various settings via OSX Settings > General > Scrollbars, problem exists on all browsers on the affected systems.

Yes, it gives different results and that is how it is supposed to work.

Did you have some problem related to this that I can help with?

It seems as though it doesn't initialise at all because it will either only match the two following if / else if statements, in the event that it doesn't match either, nothing happens.

      if (BROWSER_SCROLLBAR_WIDTH === 0 && isFFWithBuggyScrollbar()) {
        currentPadding = window.getComputedStyle(this.content, null).getPropertyValue('padding-right').replace(/[^0-9.]+/g, '');
        cssRule = {
          right: -14,
          paddingRight: +currentPadding + 14
        };
      } else if (BROWSER_SCROLLBAR_WIDTH) {
        cssRule = {
          right: -BROWSER_SCROLLBAR_WIDTH
        };
        this.$el.addClass('has-scrollbar');
      }

Let me explain how the code is designed to work:

nanoScroller will replace browser's scrollbar with its own.

If getBrowserScrollbarWidth returns a width that is bigger than 0, then we know that browser's scrollbar will take space from current container (<div>) and we need to push it out of the view by using CSS' right property (e.g. right: 14px).

If getBrowserScrollbarWidth returns 0 for the width, then we know that the scrollbar won't take space from the container, so it actually is rendered on top of it. In this case we don't need to set right inline style, but instead use CSS to hide the browser's scrollbar: https://github.com/jamesflorentino/nanoScrollerJS/blob/master/bin/css/nanoscroller.css#L20-L25

Right I misunderstood, can be marked as closed.

@Upperfoot Thanks for reporting anyway. Feel free to open more issues if you have problem with anything. :)

@kristerkari And thanks for answering the issue! :)