web-dev-qa-db-ja.com

IOS Safari：キーボードが開いていて、本文のスクロールが無効になっている場合の不要なスクロール

モーダルウィンドウを開いたときにページスクロールを無効にする既知の方法があります。

CSS：

html {
  height: 100%;
}

body.disable-scroll {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

HTML：

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
</head>

<body class="disable-scroll">
    <div class="page-content">
        <input type="text">
        ... content ...
    </div>
</body>

</html>

しかし、IOSの場合、仮想キーボードが開かれた後、Safariのスクロールが有効になります。そして、window.innerHeight + window.scrollX。ページの下部に空白のギャップが表示されます。 enter image description here

編集者のURL
https://codesandbox.io/s/condescending-snow-skuo5?fontsize=14

IPhoneで確認するフルスクリーンURL
https://skuo5.codesandbox.io/
iPhoneまたはXCodeでIOS 12+を使用して開くだけで、スクロールしてから入力に焦点を当て、もう一度スクロールしてみてください。

htmlioscss
10
Dzmitry Vasilevsky

面倒な検索を行ったところ、次の記事で指摘したように、iPhoneの問題だと思われます。 https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the- keyboard-b5aa3f34228d

したがって、CSSで確実に実行する方法はありません。

しかし、それによってJQueryとJavascriptが使用できなくなるわけではありません>：）

ここにあなたのシナリオのための整然とした回避策があります。複数のテキストボックスでもテストしましたiPhoneのみ：

document.getElementById("app").innerHTML = `
<div class="page-content">
<input type="text" 
onfocus="disableScrolling(this)" 
onfocusout="enableScrolling(this)">
  <p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p>
  <input type="text" 
  id="text2"
onfocus="disableScrolling(this)" 
onfocusout="enableScrolling(this)">
  <p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p>
</div>`;

var currentElem;        

function stopScroll() 
{
    if(currentElem)
    {
        var top = $("input:focus").offset().top;
        $('html, body').stop().animate({
            scrollTop: top
        }, 500, function(){});
    }
}

function disableScrolling(elem) 
{
    currentElem = elem;
    document.addEventListener("touchend", stopScroll);
    setTimeout(function()
    {
        stopScroll();
    },10);
}

function enableScrolling() 
{
    currentElem = undefined;
    document.removeEventListener("touchend", stopScroll);
}
html {
  height: 100%;
  scroll-behavior: smooth;
}

body.disable-scroll {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

.page-content {
  background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="disable-scroll">
  <div id="app"></div>
  <div>End of body</div>
</body>

問題：ユーザーはtextboxに焦点を合わせながらスクロールして離れることができます

仮定して、

Solution：ユーザーが好きな場所にスクロールできるようにし、完了したら、ユーザーを希望の場所にスムーズに戻します。 input:focused：p

注：私は物事をより簡単にするためにJQueryを使用しました。純粋なJavaScriptを使用したい場合は、特定のコードの代わりを見つけることができます。

5
Prajyot Tote

このCSSを試して頂けますか。

html {
  height: 100%;
}

body.disable-scroll {
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height: 100vh;
  overflow: hidden;
}
2
sbrrk

このCSSで試してください。

html {
  height: 100%;
}

body.disable-scroll {
  position: fixed;
  min-height: 100%;
  bottom:0;
  top:0;
  overflow: hidden;
}
0
Swati

私は自分のプロジェクトの1つでこれを行いました...

キーボードを開くとき、これを身体に使用します

$(body).bind('touchmove', function (e) {
    e.preventDefault()
});

そして、もう一度スクロールしたいときにバインドを解除します

$(body).unbind('touchmove');

高さ：100％または100vhと組み合わせると、オーバーフロー：非表示になります。うまくいくはずです。

0
Every Screamer