在网页上,我有一个叠加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;
}
与 overflow
一起,也添加这些属性以防止正文滚动
body.NoScrolling {
overflow: hidden;
position: fixed;
height: 100vh;
}