CODEWITHSUNDEEP
javascriptjqueryhtmlcssoverscroll
Michael
Michael

Reputation: 89

How to prevent overscrolling on iOS Safari?

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;
}

Upvotes: 1

Views: 1320

Answers (1)

nimsrules
nimsrules

Reputation: 2064

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

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

Upvotes: 1

Related Questions