用javascript滾動陰影

滾動陰影是一種用戶體驗良好的設計，只有當元素可以滾動時才會顯示一個小小的內陰影。令人驚奇的是，這可以用CSS實現，堪稱CSS技巧的典範。然而……它在iOS Safari上並不起作用。它曾經可以工作，但在iOS 13中以及其他一些有用的CSS功能一起失效了，沒有解釋原因，並且一直沒有修復，但現在至少在2022年7月已經修復了（感謝Ronald！）。

以下是一個純CSS示例，您可以在所有瀏覽器中看到它的效果。截圖如下：（此處應插入截圖）

我之所以現在提出這個問題，是因為我看到Jonnie Hallman再次在博客中提到它。他在5月份將其作為一個很棒的小細節提到。在某些界面中，滾動陰影非常有意義。

回過頭來看，我想到了目前有效的解決方案，使用滾動事件。如果滾動區域已滾動，則顯示頂部和左側陰影。如果滾動區域沒有完全滾動，則顯示底部和右側陰影。考慮到這一點，我嘗試了最簡單、最直接、最不巧妙的方法，即在滾動區域的頂部、右側、底部和左側放置空的div。我稱這些為“邊緣”，我使用Intersection Observer API觀察它們。如果任何邊緣與滾動區域不相交，我可以假設該邊緣已滾動，並且可以顯示該邊緣的陰影。然後，一旦邊緣相交，我可以假設滾動區域已到達滾動的邊緣，因此我可以隱藏該陰影。

巧妙！不幸的是，沒有在線演示，但請閱讀文章以了解有關實現的更多詳細信息。

其他基於JavaScript的示例

但我認為，如果您要這樣做，則應該選擇IntersectionObserver方法。希望能看到有人將這些想法中最優秀的部分整合在一起（暗示暗示）。

以上是用javascript滾動陰影的詳細內容。更多資訊請關注PHP中文網其他相關文章！