CSS：如何阻止在iOS Safari上滚动？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

ipad safari: disable scrolling, and bounce effect? 12 answers

ipad safari:禁用滚动和弹跳效果? 12个答案

I created a modal. When the modal is open I'm stopping the scroll on Desktop with overflow:hidden; to the <body>. It's working.

我创建了一个模态。当模态打开时,我停止桌面上的滚动溢出:隐藏;到。它的工作原理。

But it's not working on my iPhone 6s Mobile Safari.

但它不适用于我的iPhone 6s Mobile Safari。

How can I prevent scrolling when the modal is open in mobile safari?

如何在移动野生动物园中打开模态时阻止滚动?

2 个解决方案

#1

There isn't (to my knowledge) a great way to accomplish this with CSS without repercussions on the UX.

没有(据我所知)使用CSS实现这一目标的好方法,而不会影响用户体验。

While it's Javascript, and not CSS, the best way I've found to do this is the following:

虽然它是Javascript,而不是CSS,我发现这样做的最好方法如下:

// Disable scrolling.
document.ontouchmove = function (e) {
  e.preventDefault();
}

// Enable scrolling.
document.ontouchmove = function (e) {
  return true;
}

#2

Combine it with position: fixed to do this on iOS…

将它与位置结合:固定在iOS上执行此操作...

overflow: hidden;
position: fixed;

#1