www ......星期三！CSS滚动Snap.

经过泰勒懒散|2019年7月31日

对于越来越多的人，智能手机已成为浏览网络的选择设备。屏幕方向和基于触摸界面的差异需要我们设计网站的方式对基本级别进行更改。首先在2016年推出，CSS滚动Snap是我们许多人的特征，我们的意识比我们熟悉。类似于智能手机上的回家屏幕的方式平滑地向侧滑动以访问其他应用程序，滚动Snap沿网页指定点以捕捉到，确保页面的内容以其预期的方式显示。

对于那些花费大量时间仔细准备我们网站内容的人来说，滚动Snap提供了另一种控制程度。它在不同浏览器和响应页面设计中工作的能力有助于创建类似的浏览体验，无论设备如何。

在基本级别上，通过捕捉项目以在容器中设置点来滚动捕捉函数。在下面的示例中，捕获点表示为红色虚线，并且容器以绿色勾勒。捕捉点有几个不同的方向。首先，它们可以设置为相对于容器的位置，如下图所示。在下面的第二个例子中，它们也可以设置为相对于物品本身的位置。这听起来很简单。那么你什么时候应该用它？

如果图像是您的主要内容形式，滚动Snap.将特别有用。捕捉点的战略位置将阻止您网站上的图像仅部分可见。这使其成为任何类型的图像库的最佳选择，如旋转板或网格。它也适用于某些类型的文本，如图像下方的标题。

更大的文本可能是有问题的。如果文本正文不满意在定义的容器中不合适，则滚动扫描可能会使副本的某些部分无法访问。在下面的示例中，由于SNAP配置为将图像的顶部带到捕捉点，因此文本的一部分变得无法读取。

其中有滚动扫描的主要问题。当内容大于容器时，管理捕捉点可能变得困难。如果只使用单个参数，则您的内容部分可能完全无法访问。在下面的示例中，我们可以看到，随着滚动捕捉到下一个图像的顶部，将跳过容器中出来的图像的部分。这对于图像和文本都是有问题的。因此，滚动扫描不太适合文章，其中单个读取偏好可能不是由单个捕捉点最佳服务。有些人可能更喜欢将页面从上到下读取页面，就像一本书，而其他人可能会持续滚动以保持屏幕顶部的当前行。