Question

在网页上，我有一个叠加层div，该叠加层将通过单击特定的按钮或图像来显示。为了避免在背景中滚动，当覆盖层显示时，我使用overflow: hidden向主体添加了CSS类。

在桌面浏览器上，此功能可以正常运行，但在iOS Safari（在我的情况下为iOS 12.x）上无法正常运行，页面仍在后台滚动。

有人知道解决方案吗？

$('.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;
}

Answer 1

与overflow一起，也添加这些属性，以防止正文滚动

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

如何防止iOS Safari过度滚动？

1 个答案: