JavaScriptで影をスクロールします

スクロールシャドウは優れたユーザーエクスペリエンスデザインであり、要素がスクロールできる場合にのみ、小さな内側の影が表示されます。驚くべきことに、これはCSSで達成でき、CSSスキルの例です。ただし、iOS Safariでは機能しません。以前は機能していましたが、IOS 13やその他の有用なCSS機能では失敗しましたが、その理由について説明せずに修正されていませんが、少なくとも2022年7月に修正されました（ロナルドのおかげ！）。

以下は、すべてのブラウザーでその効果を確認できる純粋なCSSの例です。スクリーンショットは次のとおりです。（スクリーンショットをここに挿入する必要があります）

ジョニー・ホールマンがブログでもう一度言及しているのを見たので、私は今この質問をしています。彼はそれを5月に大きな細部として言及しました。一部のインターフェイスでは、スクロールシャドウは非常に理にかなっています。

振り返ってみると、スクロールイベントを使用して、現在機能するソリューションを考えました。スクロール領域がスクロールしている場合、上部と左の影が表示されます。スクロール領域が完全にスクロールしない場合、底部と右の影が表示されます。これを念頭に置いて、私は、スクロール領域の上部、右、下、左に空のDivを配置することです。私はこれらを「エッジ」と呼び、交差点オブザーバーAPIを使用してそれらを観察します。エッジがスクロール領域と交差しない場合、エッジがスクロールしており、そのエッジの影が表示されると仮定できます。次に、エッジが交差すると、スクロール領域がスクロールの端に達したと仮定することができ、その影を隠すことができます。

頭がいい！残念ながら、オンラインデモはありませんが、実装の詳細については記事を読んでください。

その他のJavaScriptベースの例

しかし、これを行いたい場合は、IntersectionObserverメソッドを選択する必要があると思います。うまくいけば、誰かがこれらのアイデアの最高の部分をまとめているのを見ることができます（ヒントをオンにします）。

以上がJavaScriptで影をスクロールしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。