How to prevent overscrolling on iOS Safari?

Question

On a webpage I have an overlay div which will be displayed by clicking on a specific button or image. To avoid scrolling in the background I added a CSS class to the body with overflow: hidden when the overlay is displayed.

On desktop browsers this works as expected but not on iOS Safari (in my case iOS 12.x), the page still scrolls in the background.

Does anybody know a solution?

$('.item-overlay, .item-overlay .morelink').on('click', function(e) {
  overlay_id = $(this).parent().parent().attr('id') + '-popup';
  page_link = $(this).attr('data-typolink');

  $('#' + overlay_id).css('display', 'flex').hide().fadeIn(300);
  $('#' + overlay_id).scrollTop(0);

  $('body').addClass('NoScrolling'); // Scrollen im Hintergrund vermeiden (durch Hinzufügen einer entspr. CSS-Klasse)
  $('body').on('touchmove', function(e) { // doesn't work
    e.preventDefault();
  });
});

body.NoScrolling {
  overflow: hidden;
}

score 1 · Answer 1 · answered Jun 18 '19 at 10:36

1

Along with overflow, add these properties too in order to prevent the body from scrolling

body.NoScrolling {
  overflow: hidden;
  position: fixed;
  height: 100vh;
}

answered Jun 18 '19 at 10:36

nimsrules

2,026
20
22

Thank you for your help! I tried this as well and it worked with the exception that the page jumps to the top. But the page should stay at the point where it was by opening the layer... – Michael Jun 18 '19 at 11:16
That has nothing to do with CSS. For that you need to add `e.preventDefault();` for the parent click handler too – nimsrules Jun 18 '19 at 11:23
I think CSS has quite to do with that because fixed elements will always be positioned at the zero coordinates of the browser window. Well, I could reposition the elements with javascript (scrollTop and such), but that's a pain... – Michael Jun 18 '19 at 12:04
Why would you want to reposition `body` after we remove its `overflow`? – nimsrules Jun 18 '19 at 12:06
Do you have it hosted the webpage somewhere so that I can try to debug it? – nimsrules Jun 18 '19 at 12:08
The image to click on for opening the layer-div is initially not in the viewport so you have to scroll to it. By opening the layer-div I want to "freeze" the position of the page so if the layer-div will be closed the page should be at the same (scrolling-) position as before. Unfortunately I cant show you the webpage because my client wouldn't like it... – Michael Jun 18 '19 at 12:26

How to prevent overscrolling on iOS Safari?

1 Answers1