滚动阴影是指当你可以向那个方向滚动时，你可以在元素上看到一个小的嵌入式阴影。这就是良好的用户体验。你实际上可以在CSS中做到这一点，我认为这很了不起，是CSS的伟大技巧之一。除了......它在iOS Safari上不起作用。它曾经工作过，然后 在iOS 13中坏了，还有其他一些有用的CSS东西，没有解释为什么，而且从来没有被修复。
所以，现在，如果你真的想要滚动阴影（我认为它们在移动浏览器上是特别有用的），最好的办法是使用JavaScript。
这里有一个纯CSS的例子，你可以看到它在除了iOS Safari之外的所有浏览器中都能工作。截图。
我现在提出这个问题是因为我看到Jonnie Hallman又在写博客了。他在5月份的时候就提到过这是一个很棒的小细节。在某些界面上，滚动阴影真的很有意义。
退一步讲，我想到了目前有效的解决方案，即使用滚动事件。如果滚动区域已经滚动了，就显示顶部和左侧的阴影。如果滚动区域没有完全滚动，就显示底部和右侧的阴影。考虑到这一点，我尝试了最简单、最直接、最不聪明的方法，在滚动区域的顶部、右侧、底部和左侧放置空的DIV。我把这些称为 "边缘"，并使用交叉观察者API观察它们。如果任何一条边没有与滚动区域相交，我就可以认为该边已经被滚动了，我就可以显示该边的阴影。然后，一旦边缘相交，我就可以认为滚动区域已经到达了滚动的边缘，所以我可以隐藏那个阴影。
