web-dev-qa-db-ja.com

iOS overflow-x（または絶対位置）でスクロールが途切れますか？

Webページを垂直方向にのみスクロールできるようにします。だから私はoverflow-x:hidden; わたしの .page-wrapper。俺の .page-wrapperは、互いの上に2つの絶対配置レイヤーを保持します。ボタンをクリックすると、最上層が横にスライドします（前述のように、position:absolute;）そして、ウェブサイトを実際に100％ビューポートwitdhよりも広くします-そのため、水平方向にスクロールできます。

水平スクロールを防ぐために、overflow-x:hidden わたしの .page-wrapper。

それを行うと、通常のコンテンツの垂直スクロールは本当にバグが多く、正しく機能しません。

それを修正する方法はありますか？

[〜＃〜] update [〜＃〜]

-webkit-overflow-scrolling: touch;は、javascriptが高さを変更していない限り問題なく動作するようです。次の例を参照してください。ここで行っているのは、ボディの高さを2番目のレイヤーのコンテンツの高さに更新することです。したがって、上のレイヤーを左にスライドすると、空のスクロールスペースがなくなります。上層を後ろにスライドさせると、属性style（高さを設定する）を本体から削除します。その後、スクロールは再び途切れます。

function showInfos(show) {

    if ( show ) {
        $('#videos').addClass('slid');
        $('body').height($('#infos > .content').height());
        $('#page-wrap').addClass('no-overflow');
    } else if ( !show ) {
        $('#videos').removeClass('slid');
        $('#page-wrap').removeClass('no-overflow');
        $('body').removeAttr('style');
    }
}
iphoneioscssscroll
31
matt

width:100%に.page-wrapperを設定し、overflow:hiddenおよびposition:relativeに設定してみてください。それは水平スクロールを妨げる可能性があります。

2012年12月10日に更新

コード例に感謝します。あなたの意図とスクロールの問題をより明確に見ることができました。 -webkit-overflow-scrolling が必要なようです。 -webkit-overflow-scrolling: touch;をpage-wrapperに追加します。以下は、そのルールが適用された[更新されたテストページ]です。以下のコメントのテストページと比較して、違いを確認できます。

34
Tim McElwee

すべての要素に適用してみてください：

* {
  -webkit-overflow-scrolling: touch;
}
56
Ahmad Mushtaq

これは私のために仕事をしたので、どのページでも問題はありません：

html {
  -webkit-overflow-scrolling: touch;
}
1
chdonncha