背景
CSS scroll-snap 是一个非常有用的特性，它允许用户在滚动时将内容“捕捉”到预定义的位置上。这在制作网站和应用程序时提供了更好的用户体验。然而，在 iOS 10 上，我们面临一个 CSS scroll-snap 的 bug。
问题描述
当使用 scroll-snap-align: start 和 scroll-snap-type: x mandatory 将内容捕捉到左侧时，iOS 10上的 Safari 浏览器会出现一些奇怪的行为。如果您的元素宽度大于视口宽度，则用户将无法滚动到页面的右侧，并且页面似乎已锁定。这是因为 Safari 认为页面已经结束并且没有更多的内容要滚动，而实际上还存在更多的内容需要滚动。
解决方案
虽然 iOS 10 上的 Safari 存在该问题，但我们可以通过添加 scroll-snap-stop: always 来解决该问题。这样做可以告诉 Safari 在滚动到边缘时不要停止滚动，从而防止页面被“锁定”。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ----------- ------- ----------------- - ---------- - ----- - ----- - - ----- ------ ------ ------- ------ ------------------ ------ ----------------- ------- -- -- --- -- -- ------ --- -- -
学习和指导意义
这个问题展示了我们在使用新特性时需要小心。尽管 CSS scroll-snap 特性非常有用，但我们必须在多个平台和浏览器上进行测试，以确保它正常工作。此外，在遇到问题时，我们应该仔细查看文档并尝试各种解决方案，而不是简单地放弃使用该特性。
最后，当我们遇到类似的问题时，我们可以借鉴其他开发者的经验，并在社区中分享自己的解决方案。这将有助于更好地理解问题，并为其他人提供帮助。
结论
虽然在 iOS 10 上存在一个 CSS scroll-snap 的 bug，但我们可以通过添加 scroll-snap-stop: always 来解决该问题。这个问题提醒我们在使用新特性时要格外小心，在遇到问题时要仔细查阅文档并尝试各种解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28314