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

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!

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.