純粋なCSSを使用してスクロールシャドウ効果を実現します

端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現在表示領域外にスクロールされていることを示すために、次のようにスクロールに垂直な側に影が追加されます。

スクロール処理中に影が表示されることがわかります。

スクロール中に両側の列が静止したまま境界線に付着してしまう問題については、CSS では通常、 position: stickyを使用して解決します。

ただし、スクロール処理中に表示される影 (スクロールコンテナー内のコンテンツが端に触れていない場合は影が表示され、端に触れている場合は影が消えます) については、これまでのアプローチでは常に JS を使用する必要がありました。

では、純粋な CSS で実現できるソリューションはあるのでしょうか?ふふふ、そうですね。非常に巧妙なトリックがありますので、それを段階的に明らかにしていきましょう。

魔法のbackground-attachment

純粋な CSS を使用して上記のスクロールシャドウを実現するには、使用する最も重要な要素はbackground-attachmentです。

以前の記事「CSS パララックス効果」では、 background-attachmentについて詳しく説明しました。background background-attachment: fixed使用すると、次のように、Web サイトでスクロールパララックス効果や、画像をクリックしたときのような波紋効果を簡単に実現できます。

もちろん、今日の主役はbackground-attachment: fixedではなく、 background-attachment: srcollです。

background-attachment: srcoll

まず、 background-attachmentについて説明します。background background-imageが指定されている場合、 background-attachment背景をビューポートに固定するか、背景を含むブロックとともにスクロールするかを決定します。

簡単に言えば、スクロール可能なコンテナー内で背景パターンがどのように移動するかを決定します。 2 つの簡単なデモを通じて、 background-attachment: srcollとbackground-attachment: local理解します。

background-attachment: local 、これは日常的な使用法と一致しており、スクロール可能なコンテナの背景パターンはコンテナとともにスクロールします。

background-attachment: scroll 、これが今日の主役です。これは、背景が要素の内容とともにスクロールするのではなく、要素自体に対して固定されていることを示します。

まだ違いがわからない場合は、次のデモをチェックして自分で確認してください。

CodePen デモ -- bg-attachment デモ

srcollとlocalを一緒に使ってトリックを実現する

この時点で、多くの学生はまだ混乱しているかもしれません。具体的に何をすればよいのでしょうか?これはこの記事のスクロールシャドウとどのように関係するのでしょうか?

心配しないでください。スクロールシャドウの難しさは、最初にスクロールしていないときはシャドウがないことです。シャドウは、スクロールが始まったときにのみ表示されます。

そこで、ここでは、 background-attachment: srcollとbackground-attachment: localスクロールの開始時には、影の背景を隠すために、2 つの背景レイヤーを重ねて使用します。実際にスクロールするときには、重なり合った部分を削除し、影の部分のみを露出させます。

えっと？どういう意味ですか。スクロールコンテナーに、それぞれbackground-attachment: srcollとbackground-attachment: localを使用して 2 つのグラデーション効果を追加し、次のように重ね合わせます。

<!-- スクロール可能なコンテナ -->
<ul>
    <li>...</li>
    ...
    <li>...</li>
</ul>

// シナリオ 1:
.g-ワン{
    背景: 線形グラデーション(#fff, #f00);
    背景サイズ: 100% 10px;
    背景繰り返し: 繰り返しなし;
    背景添付: ローカル;
}
 
// シナリオ 2:
.g-2 {
    背景: 放射状グラデーション(50% 0、#000、#0f0 70%);
    背景サイズ: 100% 10px;
    背景繰り返し: 繰り返しなし;
    背景添付: スクロール;
}
 
// シナリオ 3:
.g-結合{
    背景：
        線形グラデーション(#fff, #f00)、
        放射状グラデーション(50% 0%、#000、#0f0 70%);
    背景サイズ: 100% 10px、100% 10px;
    背景繰り返し: 繰り返しなし;
    背景添付: ローカル、スクロール;
}

実際の効果は次のようになります。1 つの背景はコンテナーとともにスクロールし、もう 1 つの背景はコンテナーとともに固定されます。コンテナとともにスクロールする背景は、初期マスクとして機能します。

スクロールすると、最後に重ねられた画像が、実際にはスクロール時に異なる色 (影) を表示するために必要な効果であることがわかります。 2 つのグラデーションの色を調整し、マスクレイヤー ( background-attachment: local ) を白に設定してから、放射状グラデーションを使用して、固定シャドウレイヤー ( background-attachment: scroll ) に必要なシャドウの色をシミュレートします。

CSS コードは次のようになります。

.g-final {
    背景：
        線形グラデーション(#fff、透明度100%)、
        線形グラデーション(rgba(0, 0, 0, .5), 透明度100%);
    背景サイズ: 100% 30px、100% 10px;
    背景繰り返し: 繰り返しなし;
    背景添付: ローカル、スクロール;
}

灰色の影はlinear-gradient(rgba(0, 0, 0, .5), transparent 100%)を使用してシミュレートされます。

はい、完了です。上記のすべてのデモは、こちらから確認できます:

CodePen デモ - 純粋な CSS スクロールシャドウ

記事の冒頭で示したように、この手法はtableに直接適用することもできます。

CodePen デモ - 純粋な CSS テーブルスクロールシャドウ

いくつかの質問の順序

もちろん、上記のプロセスには実際に問題があります。影はbackgroundによってシミュレートされるため、最終的な効果はコンテンツが影の中にある（背景の上）ということになりますが、実際の効果はそれほど変わりません。これを許容できる場合は、このソリューションは完全に使用できます。

互換性

さて、もちろん、 background-attachmentの互換性という別の問題もあります。 CAN I USEを見てみましょう:

「Can i use」の下のコメントは、ほとんどの互換性の問題がbackground-attachment: fixedによって発生していることを示しており、この記事の有効性にはほとんど影響しません。

やっと

この記事のテクニックはオリジナルではありません。私が最初にこのテクニックを知ったのは、次の記事でした: CSS 属性 *-gradient の実用的な価値を探り、実際に使用できるかどうかをさらに探る。

純粋な CSS を使用してスクロールシャドウ効果を実現する方法については、これで終わりです。スクロールシャドウコンテンツを実現するためのより関連性の高い CSS については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: ビューポートの基本原理と詳細な使用方法

>>: Lvs+Nginx クラスターを使用して高並列アーキテクチャを構築する例