Transform not working on Chrome 61.03.3163.100

[HectorLS]

Environment

• Browser: Chrome 61.0.3163.100 (Official Build) (64-bit)
• Version of smooth-scrollbar: 8.1.4
• MacOS Sierra 10.12.6

Hello, Awesome library by the way! 🥇

this is my code, i just started to use it.

it works perfectly on Safari 11.0 , Opera 48.0, Firefox 54.0.11

But is not working on Chrome, it's initialized properly, the CSS is active, but cannot scroll, so the transform never occurs, not sure what i missed

And if i add the overflow: auto !important ( must be important because the library would overwrite it otherway) then the scroll start to do a weird jumps down and up 😢 Some help here would be much appreciated.

JS code

import Scrollbar from 'smooth-scrollbar';

var element =  document.querySelector('#scrollbar-wrapper');
var options = {
  damping: 0.25,
  thumbMinSize: 5,
  renderByPixel: true,
  alwaysShowTracks: false,
  continuousScrolling: true
};

Scrollbar.init(element, options);
document.querySelector('body').setAttribute('scroller', true);

Sass Code

[scroller='true'] {
  #scrollbar-wrapper {
    height: 100vh;
    width: 100vw;
  }
}

[idiotWu]

Hmmm...it's a little hard to tell what's happening. Could you please create an online demo on codepan.net so I can debug it myself?

-> How to create an online demo:

1. Open https://codepan.net/gist/4653b46f9e2d4c2f3585cebc1828859d
2. Modify the code as you want
3. Click "..." on the top right
4. Click "Save Anonymous Gist" (or "Save New Gist" if you've logged in)
5. Copy and paste the URL here

[HectorLS]

I put my code here and works in Chrome, but maybe these platforms have some inner layer, so i have no clue what is going on with Chrome 😩

Codepan.net Codepen.io

Ok, new discover, on Chrome if i resized the window after page load, then the smooth-scrollbar start to works, if not keep the scroll blocked 👾 Alien bug

[idiotWu]

Aha, then you may need to call scrollbar.update() after your contents get rendered.

[HectorLS]

Do you mean like this Codepen ? still not working, i thought was solved, then i realized i resized opening the console

[idiotWu]

The demo you provided works well on my Mac with Chrome 61 😕.

Just one more check: are the contents inside your scrollbar generated dynamically (via AJAX calls or some MV* frameworks)?

[HectorLS]

Mnn not, is a plain html compiled by webpack.

I added the addListener method, with just a console.log.

scrollbar.addListener(function() { console.log('scrolling action detected !')})

after resized, if i try to scroll i got an error ( finally an error, at least something to work with) Uncaught TypeError: Cannot read property 'call' of undefined

    Scrollbar.prototype.setPosition = function (x, y, options) {
        var _this = this;
        if (x === void 0) { x = this.offset.x; }
        if (y === void 0) { y = this.offset.y; }
        if (options === void 0) { options = {}; }
        var status = Object(__WEBPACK_IMPORTED_MODULE_6__scrolling___["c" /* setPosition */])(this, x, y);
        if (!status || options.withoutCallbacks) {
            return;
        }
        this._listeners.forEach(function (fn) {
            fn.call(_this, status);
        });
    };

is that last fn.call

[idiotWu]

That's very confusing 😕 😕 .

Can you upload your project to a public GitHub repository so that I can debug it myself?

[HectorLS]

Yeah, check the repo

The branch is the one without react where i try everything in vanilla.

$ yarn install
$ npm run dev

thank you so much, i'm so lost with this error.

[idiotWu]

Thanks for the link!

1. The problem that you could not scroll is caused by style-loader: CSS is loaded after JS, so scrollbar can't get a limited height

2. You should pass a function to scrollbar.addListener here: https://github.com/HectorLS/tibicenas-framework/blob/c00946ee15d7947dea18246adbe5d4a454cacd4b/src/helpers/Scroller.js#L21. For example, this.scrollbar.addListener(this.addListener).

Maybe I can do some fixes to avoid this problem 😃.

[HectorLS]

hmmm so i need to update the webpack setup to make css load before JS, ok i gonna work on that and tell you something, thank you so much.

Yeah would be nice 😂

[HectorLS]

Mnnn using webpack with the HMR (Hot Module Replacement) seems to be a headache setup css to load before JS, so as a temp fix, i'm gonna add this block to the <head>:

<style>
   [scroller='true'] #scrollbar-wrapper {
      height: 100vh;
      width: 100vw;
   }
</style>

Maybe a line in the Doc like: this css must be loaded before the JS would be good enough by now 😉

Again, thank you so much 👏 👏 🙇

[idiotWu]

After a little more debugging, I found it was the blob url stylesheets that caused the problem. However it's a bit hard to deal with that unless using ExtractTextPlugin in dev mode (OMG that is too bad 🙅 ).

So I added a little dirty check in my code: https://github.com/idiotWu/smooth-scrollbar/blob/05bb07f497108c57d5ceb87780e4bb4e173f487c/src/utils/shoule-propagate-momentum.ts#L21-L24

You can upgrade smooth-scrollbar to 8.1.5 to see if it works 😉.

[HectorLS]

using ExtractTextPlugin in dev mode 😨

Tested and working, (now without the fix in the <head>) I owe you a couple o 🍺s !

🚀 Issue solved!

[idiotWu]

Uh sorry, you'd better install v8.1.6 because I made a mistake in 8.1.5 😅...