就是这样滚动

您如何知道页面（或页面上的任何元素）是否可以滚动？好吧，如果它有滚动条，这是一个很好的指示。您可能仍然需要与您的客户争论“折叠”或其他什么，但我认为没有人会对滚动条是什么或它表示什么感到困惑。

但是假设没有滚动条。这非常常见。 macOS 默认情况下隐藏滚动条，仅在滚动时显示它们。大多数移动浏览器都没有滚动条，即使您尝试使用类似 overflow: scroll; 的东西强制显示它们。

为什么这很重要？如果您不知道某个区域是否可滚动，您可能会错过重要的内容或功能。

我经常想到 Tyler Hall 的 完美裁剪 故事。iOS 上有一个屏幕具有您需要向下滚动才能使用的重要功能，但没有任何指示表明您可以在那里滚动。

结果是 Tyler 的妈妈实际上无法找到她习惯的功能。不太好。

有一种复杂的方法 可以检测可见的滚动条并强制它们可见，但其中某些东西让我感到不适。它不尊重用户的偏好（假设是用户的偏好），需要 DOM 操作测试，并使用供应商前缀 CSS（这可能会存在很长时间，但 现在已经标准化，所以可能不是永远）。

我喜欢这些方法以及 Chris Smith 和他的想法

我最喜欢的是基于阴影的技术。对我来说，内阴影是一个非常清晰的指示，因为它使内容看起来像是从下方流出，并且阴影跟随边缘作为提示，表明您可以在该方向上滚动。此外，您可以在那里控制 CSS，因此我认为它可以相当容易地匹配您所处的任何 UI 情况。

不过应该知道它 可以通过纯 CSS 完成，无需 JavaScript，并且是 CSS 的绝佳技巧之一。