web-dev-qa-db-ja.com

Mobile overflow：scroll and overflow-scrolling：touch //ビューポートの「バウンス」を防ぐ

モバイル（サファリ、ウェブビュー、どこでも）で、overflow:scrollおよびoverflow-scrolling: touchとても滑らかなスクロールを提供します。

しかし、それはページを「バウンス」（下に丸で囲まれた領域）にします。これは、あなたがそれを使用していない場合ではありませんが、エクスペリエンスを「ネイティブ」より少し少なくします（より簡単に言えば、それについての意見は、まったく役に立たない）

それを防ぐ方法はありますか？あなたの助け/ヒント/返信をどうもありがとう

that kind of suxx

mobile-safarioverflowviewport
27
Ben

ビューポートの跳ね返りを防ぐCSSの回避策を見つけることができました。重要なのは、-webkit-touch-overflow：scrollを適用して3つのdivにコンテンツをラップすることでした。最終的なdivの最小高さは101％でなければなりません。さらに、デバイスのサイズを表すbodyタグに固定幅/高さを明示的に設定する必要があります。ボディに赤い背景を追加して、モバイルサファリビューポートではなく、現在バウンスしているコンテンツであることを示しています。

以下のソースコードはプランカーです（iOS7でテスト済みGM too）） http://embed.plnkr.co/NCOFoY/preview

これをiPhone 5でフルスクリーンアプリとして実行する場合は、高さを1136pxに変更します（Apple-mobile-web-app-status-bar-styleが「black-translucent」または「1096px」に設定されている場合、黒'）。 920xは、モバイルサファリのchromeが考慮された後）のビューポートの高さです。

<!doctype html>
<html>

<head>
    <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no" />
    <style>
        body { width: 640px; height: 920px; overflow: hidden; margin: 0; padding: 0; background: red; }
        .no-bounce { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
        .no-bounce > div { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
        .no-bounce > div > div { width: 100%; min-height: 101%; font-size: 30px; }
        p { display: block; height: 50px; }
    </style>
</head>

<body>

    <div class="no-bounce">
        <div>
            <div>
                <h1>Some title</h1>
                <p>item 1</p>
                <p>item 2</p>
                <p>item 3</p>
                <p>item 4</p>
                <p>item 5</p>
                <p>item 6</p>
                <p>item 7</p>
                <p>item 8</p>
                <p>item 9</p>
                <p>item 10</p>
                <p>item 11</p>
                <p>item 12</p>
                <p>item 13</p>
                <p>item 14</p>
                <p>item 15</p>
                <p>item 16</p>
                <p>item 17</p>
                <p>item 18</p>
                <p>item 19</p>
                <p>item 20</p>
            </div>
        </div>
    </div>

</body>

</html>
9
romiem

これに関する素晴らしいブログ投稿があります：

http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

こちらのデモと一緒に：

http://www.kylejlarson.com/files/iosdemo/

要約すると、メインコンテンツを含むdivで次を使用できます。

.scrollable {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

私があなたが説明していると思う問題は、すでに最上部にあるdiv内で上にスクロールしようとすると-divではなくページを上にスクロールし、ページの上部にバウンス効果を引き起こします。あなたの質問はこれを取り除く方法を尋ねていると思いますか？

これを修正するために、著者は ScrollFix を使用して、スクロール可能なdivの高さを自動的に増やすことを提案しています。

また、ユーザーが上にスクロールするのを防ぐために次を使用できることにも注意してください。ナビゲーション要素内：

document.addEventListener('touchmove', function(event) {
   if(event.target.parentNode.className.indexOf('noBounce') != -1 
|| event.target.className.indexOf('noBounce') != -1 ) {
    event.preventDefault(); }
}, false);

残念ながら、ScrollFixにはまだいくつかの問題があります（フォームフィールドを使用する場合など）が、ScrollFixの問題リストは代替を探すのに適した場所です。いくつかの代替アプローチは この問題 で説明されています。

ブログ投稿でも言及されている他の選択肢は、 Scrollability と iScroll です。

19
Alasdair McLeay

あなたが試すことができます

$('*').not('#div').bind('touchmove', false);

必要に応じてこれを追加します

$('#div').bind('touchmove');

#div以外はすべて修正されていることに注意してください

1
Tarik L
body {
  position: fixed;
  height: 100%;
}
0
user3941146

この答えはかなり時代遅れで、今日の単一ページのアプリケーションには適応していません。私の場合、解決策が this aricle に感謝していることがわかりました。ここでは、シンプルだが効果的な解決策が提案されています。

html,
body {
  position: fixed;
  overflow: hidden;
}

この解決策は、あなたの体がスクロールコンテナである場合には適用できません。

0
Giulio G.