A sham that will throw a window resize event even when scrollbars are added/removed (this is not something the standard window resize event does). Tested in IE9+, Chrome & Firefox latest.

hacky-scrollbar-resize-listener.js

// Demo: http://jsfiddle.net/pFaSx/

// Create an invisible iframe
var iframe = document.createElement('iframe');
iframe.id = "hacky-scrollbar-resize-listener";
iframe.style.cssText = 'height: 0; background-color: transparent; margin: 0; padding: 0; overflow: hidden; border-width: 0; position: absolute; width: 100%;';

// Register our event when the iframe loads
iframe.onload = function() {
  // The trick here is that because this iframe has 100% width 
  // it should fire a window resize event when anything causes it to 
  // resize (even scrollbars on the outer document)
  iframe.contentWindow.addEventListener('resize', function() {
    try {
      var evt = document.createEvent('UIEvents');
      evt.initUIEvent('resize', true, false, window, 0);
      window.dispatchEvent(evt);
    } catch(e) {}
  });
};

// Stick the iframe somewhere out of the way
document.body.appendChild(iframe);

Thanks, this helps me a lot.
For whose (like me) too lazy to chek first the fiddle, don't forget to add the iFrame to your document:
document.body.appendChild(iframe);

Thanks @fathzer! I've updated the gist

Awesome! I'm working on a plugin that dynamically adds/removes rows to tables based on screen width, scroll bars jumping in and out of existence was driving me crazy!! Then this nifty script came to the rescue and it all works! :D

Oh man, this is brilliant. Thank you for sharing it!

Since the initUIEvent function is now deprecated (see https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent),

var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);

Should be replaced with:

var evt = new UIEvent('resize');

Thanks for sharing! It works!

Awesome!! This helps me a lot!!

Thank you! This is fantastic!!!

For anyone interested, I've forked this into a React component https://gist.github.com/AdamMcCormick/d5f718d2e9569acdf7def25e8266bb2a

Now I understand why "problem solving" is important in programming ! Thanks 😄

Very nice! I've adapted this as a React hook https://gist.github.com/curran/0e30c621fe4fc612bf7feb0938a68e4d

Since the initUIEvent function is now deprecated (see https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent),

var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);

Should be replaced with:

var evt = new UIEvent('resize');

Not only is this deprecated, but also throws this error in the console:

Property 'initUIEvent' does not exist on type 'UIEvent'. Did you mean 'initEvent'?

Any other clue or workaround for this?

Sorry @cyberdante I wrote this in a hurry years ago and it never actually made it to production so I didn't keep this up to date. I wonder if @curran, @AdamMcCormick or @JasperTey could point to a fix?

You can use window.visualViewport?.addEventListener('resize', update); for this nowadays. It was introduced in 2019 and supported by basically every modern browser. The resize event triggers for any resize, including the opening and resizing of the on-screen keyboard on iOS and the scrollbar appearing.

Thanks @MartijnHols! It's nice to know there is a clean way of achieving this 10 years since I first posted my hacky solution!