使用 JavaScript 实现滚动阴影

滚动阴影 指的是，当且仅当您可以向某个方向滚动时，才能在元素上看到一个小小的内阴影。这是一种良好的用户体验。您实际上可以 使用 CSS 实现，我认为这太棒了，也是 CSS 的一个绝佳技巧。但是……它在 iOS Safari 上不起作用。它曾经有效，然后 在 iOS 13 中失效了，还有一些其他有用的 CSS 功能也失效了，没有解释原因并且从未修复，但现在已修复，至少截至 2022 年 7 月（感谢 Ronald！）。

这是一个纯 CSS 示例，您可以看到它在所有浏览器中都能正常工作。截图

我之所以现在提起它，是因为我看到 Jonnie Hallman 再次在博客中谈论它。他在 5 月份将其称为一个很棒的 小细节。在某些界面中，滚动阴影确实很有意义。

退一步说，我考虑了目前有效的解决方案，即使用滚动事件。如果滚动区域已滚动，则显示顶部和左侧阴影。如果滚动区域没有完全滚动，则显示底部和右侧阴影。考虑到这一点，我尝试了最简单、最直接、最不聪明的方案，即在滚动区域的顶部、右侧、底部和左侧放置空 div。我将这些称为“边缘”，并使用 Intersection Observer API 观察它们。如果任何边缘与滚动区域没有交叉，我可以假设该边缘已被滚动，并且可以显示该边缘的阴影。然后，一旦边缘交叉，我可以假设滚动区域已到达滚动的边缘，因此可以隐藏该阴影。

很巧妙。不幸的是，没有实时演示，但 阅读文章 可以了解有关实现的一些额外细节。

其他 JavaScript 实现的示例

但我认为，如果您要这样做，应该选择 IntersectionObserver 方法。希望有人能将这些想法中最好的部分整合在一起（眨眼眨眼）。