Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
@fathzer
Copy link

fathzer commented Aug 12, 2014

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

@OrganicPanda
Copy link
Author

OrganicPanda commented Aug 13, 2014

Thanks @fathzer! I've updated the gist

@thejmazz
Copy link

thejmazz commented Aug 25, 2014

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

@threevolve
Copy link

threevolve commented Nov 5, 2014

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

@JasperTey
Copy link

JasperTey commented Oct 2, 2015

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

@ngson
Copy link

ngson commented Oct 19, 2015

Thanks for sharing! It works!

@TakahashiEi
Copy link

TakahashiEi commented Mar 24, 2016

Awesome!! This helps me a lot!!

@mxvanzant
Copy link

mxvanzant commented Mar 24, 2016

Thank you! This is fantastic!!!

@AdamMcCormick
Copy link

AdamMcCormick commented Apr 14, 2016

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

@codemilli
Copy link

codemilli commented Feb 27, 2017

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

@curran
Copy link

curran commented Jul 22, 2019

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

@cyberdante
Copy link

cyberdante commented Jan 12, 2020

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?

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