How to disable scrolling and re-enable scrolling on a mobile touch screen device
10,583
Try this code :
var scroll = true
$(document).bind('touchmove', function(){
scroll = false
}).unbind('touchmove', function(){
scroll = true
})
$(window).scroll(function() {
if ($('button').is(':checked') && scroll == false) {
$(document).scrollTop(0);
}
})
Comments
-
alutz almost 2 years
This is not so much of a question as it is an solution to the question.
It was difficult find a solution until I stumbled across the answer in added by hallodom (How to disable scrolling temporarily?) which was responding to a slightly different problem.
I wanted to explicitly document an answer to the problem. Other solutions are most welcome and would add to the conversation.
hallodom's solution was:
For mobile devices, you'll need to handle the
touchmove
event:$('body').bind('touchmove', function(e){e.preventDefault()})
And unbind to re-enable scrolling. Tested in iOS6 and Android 2.3.3
$('body').unbind('touchmove')
I used hallodom's solution by simply attaching them to functions called when an object in my DOM was clicked:
$('body').on('click', 'button', function(e){ if($(this).prop('checked')){ disable_scroll(); }else{ enable_scroll(); } }); function disable_scroll() { $('body').bind('touchmove', function(e){e.preventDefault()}); } function enable_scroll() { $('body').unbind('touchmove'); }