滚动阴影是一种用户体验良好的设计，只有当元素可以滚动时才会显示一个小小的内阴影。令人惊奇的是，这可以用CSS实现，堪称CSS技巧的典范。然而……它在iOS Safari上并不起作用。它曾经可以工作，但在iOS 13中以及其他一些有用的CSS功能一起失效了，没有解释原因，并且一直没有修复，但现在至少在2022年7月已经修复了（感谢Ronald！）。
以下是一个纯CSS示例，您可以在所有浏览器中看到它的效果。截图如下：（此处应插入截图）
我之所以现在提出这个问题，是因为我看到Jonnie Hallman再次在博客中提到它。他在5月份将其作为一个很棒的小细节提到。在某些界面中，滚动阴影非常有意义。
回过头来看，我想到了目前有效的解决方案，使用滚动事件。如果滚动区域已滚动，则显示顶部和左侧阴影。如果滚动区域没有完全滚动，则显示底部和右侧阴影。考虑到这一点，我尝试了最简单、最直接、最不巧妙的方法，即在滚动区域的顶部、右侧、底部和左侧放置空的div。我称这些为“边缘”，我使用Intersection Observer API观察它们。如果任何边缘与滚动区域不相交，我可以假设该边缘已滚动，并且可以显示该边缘的阴影。然后，一旦边缘相交，我可以假设滚动区域已到达滚动的边缘，因此我可以隐藏该阴影。
巧妙！不幸的是，没有在线演示，但请阅读文章以了解有关实现的更多详细信息。
但我认为，如果您要这样做，则应该选择IntersectionObserver方法。希望能看到有人将这些想法中最优秀的部分整合在一起（暗示暗示）。
以上是用javascript滚动阴影的详细内容。更多信息请关注PHP中文网其他相关文章！
