How to disable scroll / scrolling on iOS devices (iPad, iPhone, Mac) with user-controlled toggle (enable / disable) [duplicate]

Question

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!

Answer 1

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.

• Disable scrolling in an iPhone web application?
• Disable all scrolling on webpage
• iPhone Web App - Stop body bounce/scrolling in iOS8
• ipad safari: disable scrolling, and bounce effect?
• iPhone Web App - Stop body scrolling
• iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?
• Enable/Disable Scrolling in iPhone/iPad’s Safari
• iOS prevent scrolling on body