[CSSチュートリアル】ピュアCSSで作るスクロールシャドウ効果

さっそくですが、スクロール可能な要素には、非常によくあるケースがあります。通常、要素が現在スクロールされていることを示すために、スクロールに垂直な側面に影を追加して、そのスクロールを可視領域外に与える、このようなものです。

ご覧のように、スクロール中に影が表示されます。

左右の列が静止しており、スクロールするとボーダーに吸着するような場合、CSSでは一般的に position: sticky を使って修正します。

しかし、スクロール中にのみ現れる影（スクロールコンテナ内のコンテンツがスティッキーでなければ影が現れ、スティッキーであれば影が消える）については、従来はJSで対応するのが一般的でした。

では、これを実現する純粋なCSSのソリューションはあるのでしょうか？おいおい、あるにはありますよ。とても巧妙な隠し方があるので、順を追って公開しましょう。

魔法のような background-attachment

上記のスクロールシャドウを純粋なCSSで実装するには、中核となる要素である background-attachment .

以前の記事で--。 パララックス効果用CSS について詳しく説明しています。 background-attachment の上に描画する background-attachment: fixed このように画像クリックと同様のスクロールするパララックス効果やウォーターライン効果をWebサイトにシンプルに実装することが可能です。

もちろん、今日の主役は background-attachment: fixed しかし background-attachment: srcoll .

background-attachment: srcoll

まず、紹介するのは background-attachment を指定すると background-image すると background-attachment は、背景がビューポートで固定されているか、またはそれを含むブロックと一緒にスクロールするかを決定します。

簡単に言うと、スクロール可能なコンテナの中で背景パターンがどのように動くかを決定します。2 つの簡単なデモで background-attachment: srcoll と background-attachment: local .

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

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

まだ違いが分からないという方は、以下のDEMOをご覧になってみてください。

CodePenデモ -- bg-attachmentデモ

srcoll と local を併用することで、目隠しを実現します

この時点では、まだ何をやろうとしているのか、多くの学生が混乱しているかもしれません。この記事のスクロールシャドウとどう関係があるのでしょうか？

ご安心ください。スクロールシャドウの難しさは、初期スクロールがないときは表示されず、スクロールが始まってから表示されることです。

そこで、ここでは background-attachment: srcoll [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]