Flexboxを用いた水平スクロールの実現法

ウェブサイトを作成する場合は、水平スクロールコンポーネントを作成するように求められている可能性があります.これは、Flexboxのほんの数行を使用してこれを実装することは非常に簡単です.あなたに見せてあげよう.

プロジェクトレイアウト

我々はスクロールするすべての画像を含むコンテナーを作成する必要があります.以下がコードです.

<div class="container"><img src="images/bhutan1.jpg" alt="Bhutan" />
<img src="images/bhutan2.jpg" alt="Bhutan" />
<img src="images/bhutan3.jpg" alt="Bhutan" />
<img src="images/bhutan4.jpg" alt="Bhutan" />
<img src="images/bhutan5.jpg" alt="Bhutan" />
<img src="images/bhutan6.jpg" alt="Bhutan" />
<img src="images/bhutan7.jpg" alt="Bhutan" /></div>

プロジェクトのスタイル設定

次のステップは、容器が水平にスクロールするようにスタイリングを追加することです.これを行うには、コンテナボックスをflexboxとして表示します.また、オーバーフローX値をautoに設定しています.以下にスタイルを示します.

 .container {
    display: flex;
    overflow-x: auto;
}

これは水平スクロールがどのように見えるかです.

これは水平スクロール領域の要件を提供します.私はそれがどのように見えるかに満足していない.変更したいことは三つあります.

はイメージ

の間に白いスペースを加えます

取得水平スクロールバー

は、スクリーン

の中央にスクロールを置きます
画像が触れている.彼らの間に白いスペースを加えましょう.以下にCSSを示します.

.container img {
    margin-right: 15px;
}

次に、このコードで行う水平スクロールバーを削除します.

.container::-webkit-scrollbar {
    display: none;
}

私がしたい最後の変更は、画面の中央にスクロール領域を中心にすることです.既定では、HTMLの高さは要素の高さです.私は高さをビューポートの100 %にする必要があります.Flexboxは、センターアイテムに整列アイテムを設定する方法を提供します.この機能を使用するには、体をフレックスボックスとして表示するように変換します.ここでは、私は体に追加するコードです:

body {
    display: flex;
    align-items: center;
    height: 100vh;
}

これらの変更で、我々の最終的な水平スクロール域がどのように見えるかは、ここにあります.

結論

Flexboxを使用して水平スクロール領域を作成することは非常に簡単です.読書ありがとう.

トレーニングコース

私は、私のウェブサイトCodeprepにトレーニングコースをつくります.私は、Vue、Webpack、Flexbox、機能的なプログラミングとより多くのトレーニングコースを持っています.Check it out here.