ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで水平スクロールバーをキャンセルすることはできますか?

CSSで水平スクロールバーをキャンセルすることはできますか?

青灯夜游
青灯夜游オリジナル
2022-04-25 19:22:034638ブラウズ

CSS は水平スクロール バーをキャンセルできます。スクロール バーの親要素に overflow-x 属性を追加し、その属性値を「hidden」に設定するだけです。構文は「親要素 {overflow」です。 -x: hidden" ;}"; このメソッドは、コンテンツが左端または右端からはみ出した場合にスクロール機構を提供せず、コンテンツを直接切り取るように設定できます。

CSSで水平スクロールバーをキャンセルすることはできますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css は水平スクロール バー をキャンセルできます。

CSS では、overflow-x 属性を使用して水平スクロール バーを削除できます。

  • overflow-x 属性は、要素がコンテンツ領域からオーバーフローしたときにコンテンツの左端/右端を切り取るかどうかを指定します。属性値は「hidden」に設定されます。「hidden」を使用すると、コンテンツが左端または右端からはみ出してもスクロール機構は提供されず、コンテンツが直接切り取られます。

  • 例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style>
    div {
    width: 1400px;
    }
    </style>
    </head>
    
    <body>
    <div>
    很长的内容...
    </div>
    </body>
    
    </html>

水平スクロール バーが表示されることがわかります。

CSSで水平スクロールバーをキャンセルすることはできますか?このスクロール バーを非表示にするには、スクロール バー要素の親要素 (オーバーフロー要素) に overflow-x 属性を設定します。これが body 要素です

body{
	overflow-x: hidden;
}

ページ上のスクロール バーが消えていることがわかります。

CSSで水平スクロールバーをキャンセルすることはできますか?注: この方法で非表示にしたスクロール バーは、コンテンツが非常に長い場合、コンテンツの一部も非表示になります。慎重に検討する必要があるため、最大幅を設定して自動的に折り返されるようにすることをお勧めします。 。

body{
	overflow-x: hidden;
	max-width: 1000px;
}

(学習ビデオ共有:

css ビデオ チュートリアル

Web フロントエンド

)

以上がCSSで水平スクロールバーをキャンセルすることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。