web-dev-qa-db-ja.com

レスポンシブウェブサイト：水平スクロールバーを取り除く方法は？

現在、レスポンシブウェブサイトを作成しています。水平方向にスクロールすると、右側の空きスペースに問題があることに気付きました。 overflow-x: hiddenを追加すると、水平スクロールを削除できます。ただし、iPhoneやiPadなどのモバイルデバイスでは機能しません。

そこで、空のスペースを取り除くのに役立つため、min-widthを追加しようとしました。しかし、full.cssにmin-widthを配置することはできません（例：min-width:1000px;）。これは全角に設定されるためです。以下の例を参照してください。

full.css

#wrapper {
    width: 1000px;
    margin: 0 auto;
}

responsive.css（1000px未満）

#wrapper {
    width: 100%;
    margin: 0;
}

この問題を解決する方法を知っているかどうか疑問に思いましたか？より良い選択肢があれば教えてください。または、新しいラッパーIDを作成する必要がありますか？

widthhorizontal-scrollingcss
7
user1717475

時々私はこの問題を抱えています、そして問題を解決することの大部分は原因である要素を特定することです。ブラウザのJavaScriptコンソールで実行できるこの小さなjQueryスクリプトを思いついたので、どの要素が本体の幅よりも広いかを見つけて、迷惑なスクロールバーを表示しました。

$.each( $('*'), function() { 
    if( $(this).width() > $('body').width()) {
        console.log("Wide Element: ", $(this), "Width: ", $(this).width()); 
    } 
});
26
Jonathan

Cssコードを使用して水平オーバーフローを非表示にすることができます（そうすると、水平スクロールバーが再び表示されることはありません）：

body{
    overflow-x:hidden;
}
14
Amin.Che

ページへのリンク？ラッパー内に、ブラウザーウィンドウを超えている何らかの要素がある可能性があります。

多くの場合、パディングと幅があります。ラッパー内に100％幅に設定されている要素があり、20pxの左右にパディングを追加する場合は注意してください。要素が100％+ 40ピクセルであるため、水平スクロールバーが作成されます。

したがって、div内に液体要素を構築する場合は、次のようにします。

#liquidelement {
   width:96%;
   padding:0 2%;
}

幅からパディングを差し引く必要があります。また、固定ではなく流動的であるため、レイアウトを行うときは常にパディングにパーセンテージを使用します。

5
VertigoSFX

ここでは、3つ以下の手順が必要です。

  1. 水平バーを右にスクロールすると、余分な空のパディングが表示されます。
  2. 検査要素を開く

これは、ctrl + shiftを押しながらiを押すことで実行されます

  1. すべての要素をスクロールします。余分なパディングが含まれている要素は、作成された空のスペースにページコンテンツを突き出す必要があります。
0
Thato Sello