32

モバイル (Safari、webviews、どこでも) で overflow:scroll、overflow-scrolling: touch非常にスムーズなスクロールを提供します。これはクールです。

しかし、それはページを「バウンス」させます (以下の円で囲まれた領域)。これは、それを使用していない場合には当てはまりませんが、エクスペリエンスが「ネイティブ」ではなくなります (より簡単に言えば、私ができる限りそれについての意見は、絶対に役に立たない)

それを防ぐ方法はありますか？

そんなサックス

4

5 に答える 5

22

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

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 にはまだいくつかの問題があります (フォーム フィールドの使用時など)。この号では、いくつかの代替アプローチについて説明します。

ブログ投稿でも言及されている他の代替手段は、ScrollabilityとiScroll です。

于 2013-09-20T15:36:16.313 に答える
11

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

以下のソースコードとこちらはプランカーです (これは iOS7 GM でもテストされています)。http://embed.plnkr.co/NCOFoY/preview

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

<!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>
于 2013-09-16T12:07:43.357 に答える
3

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

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

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

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

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

于 2014-10-24T23:46:23.563 に答える
0 
body {
  position: fixed;
  height: 100%;
}
于 2016-04-20T13:25:56.913 に答える