iOS: disable bounce scroll but allow normal scrolling
css, ios, iphone, javascript, mobile-safari
Solution
I have to add another answer. My first approach should work, but, there is an iOS bug, which still bumbs the whole page, even if e.stopPropagation.
mikeyUX find a workaround for this: https://stackoverflow.com/a/16898264/2978727 I wonder why he just get a few clicks for this great idea...
This is how I used his approach in my case:
var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
this.allowUp = (this.scrollTop > 0);
this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
this.slideBeginY = event.pageY;
});
content.addEventListener('touchmove', function(event) {
var up = (event.pageY > this.slideBeginY);
var down = (event.pageY < this.slideBeginY);
this.slideBeginY = event.pageY;
if ((up && this.allowUp) || (down && this.allowDown)) {
event.stopPropagation();
}
else {
event.preventDefault();
}
});
Problem
I don't want the content of my site sloshing around when the user hits the edge of a page. I just want it to stop. The omni-present javascript solution I see everywhere is this: ``` $(document).bind( 'touchmove', function(e) { e.preventDefault(); } ); ``` But this prevents scrolling entirely. Is there way to just remove the bounce. Preferably with CSS or a meta tag as opposed JS, but anything that works will do.