In reviewing the many questions and answers on this topic on StackOverflow, none of the solutions provided worked reliably. All CSS, JavaScript, jQuery and hybrid solutions had at least one deficiency that prevented the scroll from disabling and/or toggling effectively.
I've also searched the web high and wide and have not found a good answer.
So far I have this function:
function toggleScroll(btn, item) {
$(btn).click(function() {
$(item).toggleClass("noscroll");
});
}
...which will add a overflow: hidden; to any class I want onclick, and remove it on second click.
The thing is, this code doesn't work with iOS devices.
How could I make this work with iOS devices?
Ideally, I would prefer a pure CSS solution. But I understand that this may not be possible, especially the toggle component.
Any JavaScript or jQuery solution would be fine, as well.
Thanks in advance!
Disable Scroll / Scrolling on iOS Devices (iPad, iPhone, Mac) with jQuery
I think this gets you close to what you want. The only issue may be the toggle, which is two buttons (Enable and Disable). If you want to make the toggle a single button, maybe you can post a separate question or somebody else can improve upon this answer. (I'm mostly an HTML / CSS / PHP guy. I'm somewhat new to JS).
var disableScroll = false;
var scrollPos = 0;
function stopScroll() {
disableScroll = true;
scrollPos = $(window).scrollTop();
}
function enableScroll() {
disableScroll = false;
}
$(function(){
$(window).bind('scroll', function(){
if(disableScroll) $(window).scrollTop(scrollPos);
});
$(window).bind('touchmove', function(){
$(window).trigger('scroll');
});
});
credit: https://stackoverflow.com/a/17597303/3597276
Disable Scroll / Scrolling on iOS Devices (iPad, iPhone, Mac) with CSS
For a pure CSS solution to disable scrolling on iOS devices try these options:
(Of course, these have no toggle.)
html, body {
position: fixed;
}
html, body {
position: relative;
overflow: hidden;
}
body {
position: fixed;
overflow: hidden;
}
body {
position: fixed;
height: 100%;
overflow: hidden;
width: 100%;
}
Here are some of the posts and articles I read on this issue.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments