I'm working on an iPad-based web app, and need to prevent overscrolling so that it seems less like a web page. I'm currently using this to freeze the viewport and disable overscroll:
document.body.addEventListener('touchmove',function(e){
e.preventDefault();
});
This works great to disable overscroll but my app has several scrollable divs, and the above code prevents them from scrolling.
I'm targeting iOS 5 and above only so I've avoided hacky solutions like iScroll. Instead I'm using this CSS for my scrollable divs:
.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y:auto;
}
This works without the document overscroll script, but doesn't solve the div scrolling problem.
Without a jQuery plugin, is there any way to use the overscroll fix but exempt my $('.scrollable') divs?
EDIT:
I found something that's a decent solution:
// Disable overscroll / viewport moving on everything but scrollable divs
$('body').on('touchmove', function (e) {
if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
});
The viewport still moves when you scroll past the beginning or end of the div. I'd like to find a way to disable that as well.
this one works for me (plain javascript)
html:
First prevent default actions on your entire document as usual:
Then stop your class of elements from propagating to the document level. This stops it from reaching the function above and thus e.preventDefault() is not initiated:
This system seems to be more natural and less intensive than calculating the class on all touch moves. Use .on() rather than .bind() for dynamically generated elements.
Also consider these meta tags to prevent unfortunate things from happening while using your scrollable div:
Here's a zepto compatible solution
Best solution to this is css/html: Make a div to wrap your elements in, if you dont have it already And set it to position fixed and overflow hidden. Optional, set height and width to 100% if you want it to fill the whole screen and nothing but the whole screen
I've work a little workarround without jquery. Not perfert but works fine (especially if you have a scroll-x in a scoll-y) https://github.com/pinadesign/overscroll/
Fell free to participate and improve it
This solves the issue when you scroll past the beginning or end of the div
Note that this won't work if you want to block whole page scrolling when a div does not have overflow. To block that, use the following event handler instead of the one immediately above (adapted from this question):