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

This comment has been minimized.

Copy link

@fathzer 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

This comment has been minimized.

Copy link
Owner Author

@OrganicPanda OrganicPanda commented Aug 13, 2014

Thanks @fathzer! I've updated the gist

@thejmazz

This comment has been minimized.

Copy link

@thejmazz 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

This comment has been minimized.

Copy link

@threevolve threevolve commented Nov 5, 2014

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

@JasperTey

This comment has been minimized.

Copy link

@JasperTey 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

This comment has been minimized.

Copy link

@ngson ngson commented Oct 19, 2015

Thanks for sharing! It works!

@TakahashiEi

This comment has been minimized.

Copy link

@TakahashiEi TakahashiEi commented Mar 24, 2016

Awesome!! This helps me a lot!!

@mxvanzant

This comment has been minimized.

Copy link

@mxvanzant mxvanzant commented Mar 24, 2016

Thank you! This is fantastic!!!

@AdamMcCormick

This comment has been minimized.

Copy link

@AdamMcCormick AdamMcCormick commented Apr 14, 2016

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

@codemilli

This comment has been minimized.

Copy link

@codemilli codemilli commented Feb 27, 2017

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

@curran

This comment has been minimized.

Copy link

@curran curran commented Jul 22, 2019

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

@cyberdante

This comment has been minimized.

Copy link

@cyberdante 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

This comment has been minimized.

Copy link
Owner Author

@OrganicPanda 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