モバイル(サファリ、ウェブビュー、どこでも)で、overflow:scroll
およびoverflow-scrolling: touch
とても滑らかなスクロールを提供します。
しかし、それはページを「バウンス」(下に丸で囲まれた領域)にします。これは、あなたがそれを使用していない場合ではありませんが、エクスペリエンスを「ネイティブ」より少し少なくします(より簡単に言えば、それについての意見は、まったく役に立たない)
それを防ぐ方法はありますか?あなたの助け/ヒント/返信をどうもありがとう
ビューポートの跳ね返りを防ぐ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>
これに関する素晴らしいブログ投稿があります:
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 です。
あなたが試すことができます
$('*').not('#div').bind('touchmove', false);
必要に応じてこれを追加します
$('#div').bind('touchmove');
#div以外はすべて修正されていることに注意してください
body {
position: fixed;
height: 100%;
}
この答えはかなり時代遅れで、今日の単一ページのアプリケーションには適応していません。私の場合、解決策が this aricle に感謝していることがわかりました。ここでは、シンプルだが効果的な解決策が提案されています。
html,
body {
position: fixed;
overflow: hidden;
}
この解決策は、あなたの体がスクロールコンテナである場合には適用できません。