Chris 称 *滚动阴影* 为他最喜欢的 CSS-Tricks 之一。Lea Verou 普及 了使用四个分层背景渐变和一些巧妙的 background-attachment 魔法的纯 CSS 方法。结果是一个流畅的滚动交互，让用户知道在可滚动容器中还有更多内容可用。
只有一个问题：它在 Safari iOS 13 中 失效 了。有一天一切正常。第二天，就不行了。而且这并不是唯一受影响的东西。 Keith Clark 的纯 CSS视差效果 也大约在那个时候停止工作了。
好吧，读者 Ronald 写信说，一切又恢复正常了！事实上，我正在我的 iPad（Safari 15.5）上写这篇文章，Chris 的演示看起来一如既往地清晰。Keith 的 原始演示 也是如此。
那么，是什么导致它失效的呢？我们仍然不知道。但是 Safari 13 发行说明 提供了一些线索。
- 为所有框架和
overflow:元素添加了对单指加速滚动的支持，无需scroll set-webkit-overflow-scrolling: touch。- 更改了 iPad 上宽网页的默认行为，这些网页具有需要水平滚动的响应式元标记。页面按比例缩放以防止水平滚动，并且任何文本都将调整大小以保持清晰度。
它是什么时候修复的，又是如何修复的呢？好吧，在滚动阴影方面，Safari 15.4 包含 了关于 background-attachment: local 的一些工作，这可能解决了问题。在视差方面，Safari 14.1 添加 了对单个转换属性的支持……所以可能是这样吗？
我曾经尝试过这样做，但只能使用 JS 使其工作，很高兴看到它可以用纯 CSS 完成
我对这种方法最大的问题是它几乎只能用于文本。如果您在滚动区域内放置复杂的内容，例如图像，甚至任何具有背景颜色的内容，滚动指示器都位于内容下方，并且错觉就会被破坏。
我的经验也是如此。我感谢这篇文章，因为它让我了解了哪些是可能的/哪些是不可能的。但我不得不求助于 JavaScript 来实现效果。
我之前找到了一种方法，通过使用 position: sticky 并将阴影元素隐藏在标题后面： https://codepen.io/freeplayg/details/yLPGPWZ
唯一的问题是标题本身不能直接位于页面的顶部。
我尝试了一下 CSS视差演示，但不幸的是，我仍然在背景层和浏览器窗口之间看到间隙（Chrome）。当我禁用滚动条时，它完美地贴合了。
有谁知道更好的解决方案吗？