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 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 commented Aug 13, 2014

Thanks @fathzer! I've updated the gist

@thejmazz

This comment has been minimized.

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

This comment has been minimized.

Copy link

threevolve commented Nov 5, 2014

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

@JasperTey

This comment has been minimized.

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

This comment has been minimized.

Copy link

ngson commented Oct 19, 2015

Thanks for sharing! It works!

@TakahashiEi

This comment has been minimized.

Copy link

TakahashiEi commented Mar 24, 2016

Awesome!! This helps me a lot!!

@mxvanzant

This comment has been minimized.

Copy link

mxvanzant commented Mar 24, 2016

Thank you! This is fantastic!!!

@AdamMcCormick

This comment has been minimized.

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

This comment has been minimized.

Copy link

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 commented Jul 22, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.