Skip to content

Instantly share code, notes, and snippets.

@OrganicPanda
Last active April 7, 2024 10:53
Show Gist options
  • Star 32 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save OrganicPanda/8222636 to your computer and use it in GitHub Desktop.
Save OrganicPanda/8222636 to your computer and use it in GitHub Desktop.
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.
// 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);
@cyberdante
Copy link

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?

@OrganicPanda
Copy link
Author

OrganicPanda commented Apr 7, 2020

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?

@MartijnHols
Copy link

MartijnHols commented Apr 4, 2024

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.

@OrganicPanda
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment