Fixes a bug where elements with "-webkit-overflow-scrolling: touch" stop scrolling on orientation change.
/** | |
* Fixes a bug where elements with "-webkit-overflow-scrolling: touch" stop | |
* scrolling on orientation change. If you have a shim for requestAnimationFrame | |
* it would be good to replace setTimeout with that, but I wanted to write this | |
* dependancy free. | |
* | |
* @author Justin Worsdale | |
*/ | |
(function(document, window) { | |
// set scrollingElQuery to a class included on all your overflow-scrolling elements | |
var scrollingElQuery = '.scroll-pane', | |
timeout, | |
resetScrollPanes = function(e) { | |
var scrollingElements = document.querySelectorAll(scrollingElQuery), | |
i = 0; | |
/** | |
* Clear timeout so we do not have overlap if user changes orientations | |
* back and forth quickly. | |
*/ | |
clearTimeout(timeout); | |
for( ; i < scrollingElements.length; i++) { | |
scrollingElements[i].setAttribute('style', | |
'-webkit-overflow-scrolling:auto;overflow:hidden;'); | |
} | |
timeout = setTimeout(function() { | |
for( i = 0; i < scrollingElements.length; i++) { | |
scrollingElements[i].setAttribute('style', | |
'-webkit-overflow-scrolling:touch;overflow:auto;'); | |
} | |
}, 10); | |
}; | |
window.addEventListener('orientationchange', resetScrollPanes); | |
}(document, window)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment