CSSスクロールスナップ

執筆Nada Rifki ✏️
JavaScriptを再生する代わりにスクロールをカスタマイズするCSSを必要とするだけのアイデアは、それはありませんか?
今日は、CSSのスクロールスナップはあなたがそれを行う方法を示します.

それで、CSSスクロールスナップは何をしますか？

私はあなたのウェブサイトのスクロール動作を制御するためにいくつかのライブラリを使用している.私は、彼らのいくつかと恐ろしい時間を過ごした.
これらのライブラリの一部は、ページのパフォーマンスとユーザーエクスペリエンスの方法をドラッグできます.
それはあなたが新しいデザインのアップデートでより複雑さを追加すると、彼らが時々生成するすべてのバグに対処するために本当の痛みであることに言及すること.
だからこそ、私はJavaScriptライブラリに頼ることなく、私のページを介して美しいスクロールを得ることができますこの単純なCSS機能を使用したい.
これらのプロパティはまた、私は時間のトンを保存するのに役立ちます.
簡単な用語では、CSSスクロールスナップはスクロールスナップを作ります.そして、各々のスクロールで特定の点(あなたが示す)でビューポートをロックします.
一方、リニアスクロールは、コントローラのレートに従って動く.すなわち、マウス、タッチジェスチャー、または矢印キーである.
さて、どのようにCSSのスクロールスナップ機能を見てみましょう.
あなたが現実の例にまっすぐに行きたいならば、私がCCSSコードのいくつかの線でInstagramカルーセルを造った第3のセクションに頭を向けてください.
始めましょう.

CSSスクロールスナップ

CSSのスクロールスナップは2つの基本的なプロパティを適用します.scroll-snap-type and scroll-snap-align .
ここでは、それぞれについて知っておく必要があります:

最初のものscroll-snap-type , 親コンテナに適用されます.これは、スナップ方向とスナップ動作の2つの引数を受け取ります.

.container {
 scroll-snap-type: [ x | y | block | inline | both ] [ mandatory | proximity ];
}

スナップ動作の引数についてproximity スナップは、ユーザーがスクロールを停止する場所に最寄りのポイントでのみ表示されます.
一方、mandatory スナップは、ユーザーがスクロールしているときに選択した特定の位置で発生します.

第二のscroll-snap-align , がコンテナの子に適用される.

ここでx軸とy軸のスナップポイントを指定します.

.children {
 scroll-snap-align: [ none | start | end | center ]{1,2};
}

継続する前に、コンテナのオーバーフローを指定して固定高さを指定しない限り、このどれも動作しないことに注意してください.
また、子要素の1つの内容が親コンテナーよりも長い場合は必須ではありません.あなたがそうするならば、ユーザーはその内容を見ることができません.
さらに二つのプロパティがあります.

scroll-padding (親コンテナに適用される)は、CSSパディングのプロパティと同じように、オフセットとして動作します.また、scroll-padding-top , scroll-padding-bottom , scroll-padding-left and scroll-padding-right .

scroll-margin (コンテナの子にも適用されます)、CSSのマージンプロパティのようなものです.また、scroll-margin-top , scroll-margin-bottom , scroll-margin-left and scroll-margin-right .

すべてのスクロールスナッププロパティと将来のものについての詳細について学習に興味があるならMozilla documentation 常に始める良い場所です.

CSSスクロールスナップを使用して、カルーセルのようなInstagramを作成する方法

あなたがこの概念に関してより良い把握を得るのを助けるために、私はcodepen .
ここでLiveデモを参照してください.
ご覧の通り、サイズの異なる7枚の箱が入っています.
私を驚かせるのは、CSSのラインを追加する以外に何もすることがないことです.

<style>
.container {
    width: 60vw;
    height: 70vh;
    margin: 15vh auto;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    color: white;
    background-color: oldlace;
    display: flex;
    align-items: center;
}

.child {
    margin-left: 0.5rem;
    height: 90%;
    scroll-snap-align: start;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.child:nth-child(1n) {
    background-color: darkorchid;
    flex: 0 0 80%;
}

.child:nth-child(2n) {
    background-color: indigo;
    flex: 0 0 60%;
}

.child:nth-child(3n) {
    background-color: navy;
    flex: 0 0 40%;
}

.child:nth-child(4n) {
    background-color: palegreen;
    flex: 0 0 50%;
}

.child:nth-child(5n) {
    background-color: yellow;
    flex: 0 0 80%;
}

.child:nth-child(6n) {
    background-color: orange;
    flex: 0 0 60%;
}

.child:nth-child(7n) {
    background-color: tomato;
    flex: 0 0 80%;
}
</style>

JavaScriptだけでこの問題を解決するには余分な仕事がたくさん必要になります.

CSSのスクロールスナップサポートクロスブラウザ?

さて、今は100万ドルの質問を取得しましょう:クロスブラウザのサポート.
ご覧の通りhere , CSSのスクロールスナップ機能は、現代的なブラウザ全体でサポートされています.
あなたが遭遇する唯一の問題は、インターネットエクスプローラとFirefoxhere .
また、私はあなたにプロパティを追加することをお勧めします-webkit-overflow-scrolling: touch; IOSデバイスをサポートするためにコンテナに.

結論

それはかなりだ!
それはとても簡単です、しかし、これが私にコードの時間を節約することができた時間がありました.JavaScriptを使用してスクロールスナップを実装し、さまざまな幅で各子要素とスナップポイントを再計算しようとすると、あなたは私が意味するものが表示されます.
何か質問やコメントがある場合は、コメントを私に知っているか、Twitterで私をpingしてください.いつも返事.

あなたのフロントエンドは、ユーザーのCPUをhoggingですか？

Webフロントエンドがますます複雑になるにつれて、リソース貪欲な特徴はブラウザからますます要求する.クライアント側のCPU使用状況、メモリ使用量、およびすべてのユーザーの生産を監視し追跡することに興味がある場合.try LogRocket.

LogRocket ウェブアプリのDVRのように、あなたのWebアプリやサイトで発生するすべての記録.問題が発生する理由を推測する代わりに、集計することができますし、キーフロントエンドのパフォーマンスの測定については、アプリケーションの状態と一緒に再生ユーザーセッション、ログネットワークの要求を報告し、自動的にすべてのエラーを表面.
Webアプリケーションのデバッグ方法Start monitoring for free.
郵便How to use CSS Scroll Snap 最初に現れたLogRocket Blog .