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);

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!