web-dev-qa-db-ja.com

CSS:iOS Safariでスクロールを防ぐ方法

モーダルを作成しました。モーダルが開いているとき、デスクトップでスクロールを停止していますoverflow:hidden;から<body>。動いています。

しかし、私のiPhone 6s Mobile Safariでは動作しません。

モバイルサファリでモーダルが開いているときにスクロールを防ぐにはどうすればよいですか?

17
Henry Zhu

(私の知る限りでは)UXに影響を与えることなくCSSでこれを達成するための素晴らしい方法はありません。

CSSではなくJavascriptですが、これを行うための最良の方法は次のとおりです。

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

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

IOSでこれを行うには、position: fixedと組み合わせてください...

overflow: hidden;
position: fixed;
24
matharden