// 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); |
This comment has been minimized.
This comment has been minimized.
Thanks @fathzer! I've updated the gist |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
Oh man, this is brilliant. Thank you for sharing it! |
This comment has been minimized.
This comment has been minimized.
Since the var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0); Should be replaced with: var evt = new UIEvent('resize'); |
This comment has been minimized.
This comment has been minimized.
Thanks for sharing! It works! |
This comment has been minimized.
This comment has been minimized.
Awesome!! This helps me a lot!! |
This comment has been minimized.
This comment has been minimized.
Thank you! This is fantastic!!! |
This comment has been minimized.
This comment has been minimized.
For anyone interested, I've forked this into a React component https://gist.github.com/AdamMcCormick/d5f718d2e9569acdf7def25e8266bb2a |
This comment has been minimized.
This comment has been minimized.
Now I understand why "problem solving" is important in programming ! Thanks |
This comment has been minimized.
This comment has been minimized.
Very nice! I've adapted this as a React hook https://gist.github.com/curran/0e30c621fe4fc612bf7feb0938a68e4d |
This comment has been minimized.
This comment has been minimized.
Not only is this deprecated, but also throws this error in the console:
Any other clue or workaround for this? |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
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);