6

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!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Sebastian Alsina
  • 85
  • 1
  • 3
  • 9

1 Answers1

3

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.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • So how would I lock the scroll into the current position on click of a button, and then unlock on second click of the same button? – Sebastian Alsina Aug 04 '15 at 03:26
  • This is covered [here](http://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery) and [here](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily). – Michael Benjamin Aug 04 '15 at 03:31
  • These solutions cover enabling and disabling with the press of 2 buttons. One for off and one for on. How would I do this with one button? Click = scroll off, click again = scroll on? – Sebastian Alsina Aug 04 '15 at 03:35
  • If my answer doesn't address you problem let me know. I probably need to understand the functions better, as I'm relatively new to JS. – Michael Benjamin Aug 04 '15 at 03:38
  • It does! Just not all the way. I think I've got a solution and ill let you know. – Sebastian Alsina Aug 04 '15 at 03:41
  • Let me know if you come up with a solution. I'm a noob that's been trying for hours and it's really frustrating. Thanks for the hand! – Sebastian Alsina Aug 04 '15 at 03:50
  • Okay, I've got this almost working. Maybe you can show me how to improve it: In my .html, I have a function I'm calling that simply toggleClass(); to body. Then I have this: jQuery(document).on('touchmove', function(ev) { if (jQuery( ev.target ).parents().hasClass('noscroll')) { ev.preventDefault(); } }); Would it be possible to add that code within the function that I'm calling my html? – Sebastian Alsina Aug 04 '15 at 03:53
  • can you post the code you have in jsfiddle.net? – Michael Benjamin Aug 04 '15 at 03:54
  • Yeah, give me a couple of minutes. – Sebastian Alsina Aug 04 '15 at 03:55
  • This is where I am right now: `document.ontouchmove = function(e){ if(disableScroll){ e.preventDefault(); } }` ... When you have the fiddle running with your other code we can test it. – Michael Benjamin Aug 04 '15 at 04:05
  • Fiddle isn't loading on my mac. I think it's too old. That won't be an option... do you know if there is a CSS alternative to stop scrolling on iOS? overflow: hidden; stops scrolling on computer browser but not iPhone. That would fix my problem. – Sebastian Alsina Aug 04 '15 at 04:09
  • Good question. I was focusing on a solution that covered ALL devices. But if you just want something for iOS it might make the process quicker and easier. – Michael Benjamin Aug 04 '15 at 04:14
  • I don't think there's a pure CSS solution that works in iOS. But to disable scrolling in iOS put this code at the beginning of your JS file. `document.ontouchmove = function(event){ event.preventDefault(); }` – Michael Benjamin Aug 04 '15 at 04:17
  • This works, I just can't seem to figure a way to toggle it on and off. What I'm doing now is basically running that if body.hasClass("noscrolll"). It works, it's just a really bad implementation. – Sebastian Alsina Aug 04 '15 at 04:20
  • Yeah, I know. I've stopped trying to code this myself and am just looking for an established solution. iOS really doesn't make it easy. Not just for the scrolling, but I'm seeing lots of questions about removing the "bounce" effect at each end of the scroll. – Michael Benjamin Aug 04 '15 at 04:25
  • It's a known problem that scrolling in iOS is weird. I don't understand why my overflow:hidden; doesn't work like it does in the browser. ;( – Sebastian Alsina Aug 04 '15 at 04:26