32

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

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

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

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

アップデート

-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');
    }
}
4

5 に答える 5

57

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

* {
  -webkit-overflow-scrolling: touch;
}
于 2014-06-29T13:41:50.437 に答える
34

に設定して、とに設定width:100%してみてください。水平スクロールが妨げられる可能性があります。.page-wrapperoverflow:hiddenposition:relative

2012年10月12日更新

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

于 2012-10-11T19:36:07.853 に答える
1

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

html {
  -webkit-overflow-scrolling: touch;
}
于 2018-02-08T16:14:36.553 に答える
0

そのため、Bootstrap4.5テンプレートでこの問題が発生しました。「overflow-x：hidden;」を追加するたびに .page-wrapperに、iPhoneでのスクロールはもはやスムーズではなく、途切れ途切れになりました。

しかし、「overflow-x：hidden;」を削除すると .page-wrapperから、iPadでは、ユーザーはページを水平方向に移動できますが、これは望ましくありません。

ティムの解決策は素晴らしい方向性でした。私にとっての最小限の解決策は、CSSファイルに次の2つの部分を追加することでした。

CSSのトップ：

html, body {width:100%; height:100%;}

そしてCSSで：

.page-wrapper { 
/** overflow-x: hidden; GIVES ISSUES WITH IPHONE!!! **/

    width:100%; 
    height:100%;
    
    position:relative; 
    overflow-x:hidden; 
    -webkit-overflow-scrolling:touch;
}

index.htmlを入力することを忘れないでください：

<META name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'>
于 2020-12-11T02:52:09.293 に答える
-2

TLDR; transform: translate3d(0px,0px,0px)要素とラッパーに適用します。

私の場合、絶対位置要素または固定位置要素は、z-indexを小さくすることで、メインページの後ろに隠されていました。その結果、ラッパーを邪魔にならないように移動して要素を表示し、次に元に戻すと、iOSでは、その要素があった場所をスクロールしようとしたときに遅延が発生しました。スクロールすることはできましたが、1秒ほど押し続ける必要がありました。

ここで説明されている解決策は私のために働いた： https ：//css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/

基本的に、要素と要素のラッパーの両方にスタイルをtransform: translate3d(0px,0px,0px)適用する必要があります。そうすれば、スクロールはスムーズに進みました。私にとっては、要素とラッパーの両方に適用しないと、修正は機能しませんでした。

于 2016-10-07T19:57:47.413 に答える