css:背景图片是否滚动
Web开发人员很难保证良好的滚动体验，但是幸运的是，名为“ Scroll Snap”CSS模块有望提供帮助。 滚动操作完成后，它将强制执行滚动位置结束的位置。
除其他事项外，该模块还具有一些功能，可控制诸如“平移”之类的方面，并结合“快照位置”，并在滚动容器内产生内容的特定对齐方式。
W3C最近发布了“滚动快照”作为候选建议，其中包括经过深思熟虑的实现和示例以及更新的语法。 让我们潜入。
滚动捕捉术语
要完全了解滚动捕捉的功能及其工作原理，我们需要了解其术语。 当在本教程中使用这些新术语时，这样做还有助于避免混淆。
滚动捕捉发生在“快照”或“滚动”中； 但是，两者的含义相同，也可以称为“滚动容器”。 如上图所示，这是滚动捕捉行为所在的区域（外虚线框）。 目的是帮助强制滚动操作完成后，滚动容器的滚动端口将在其上结束的滚动位置。
此“快照”的每个项目均称为“快照区域”，是您要定位的对象。 每个捕捉区域都包含一个“捕捉位置”，该位置也由滚动容器的“捕捉位置”定义，并由上图中的红色虚线表示。
不用担心这些术语，让我们回顾一些示例并探索该功能在现实生活中的工作方式。 如果您想了解有关其他类型用例的更多信息，则可以从W3C示例开始，这里以照相馆为例， 在这里也是如此 。 2017年8月的模块CR规范中还有一个有趣的更新，其中指出了:target应该具有的一些有趣行为。
滚动快照演示
在撰写本文时，最好浏览Safari 11的以下演示，因为尽管来自caniuse和个人测试的数据，其他浏览器（虽然已指出是支持的）实际上并不完全支持新语法。
下面的示例仅展示了启动CSS Scroll Snap行为所需的最小属性，并且不包含任何填充填充，因为我无法找到可以使用最新发布语法的 填充填充 。 还需要注意的是，任何滚动容器都需要另一个熟悉CSS属性，即所谓的overflow 。
上面的演示将y轴用作捕捉位置，但是，您可以在x轴上轻松地完成它。 如果您的系统上没有Safari 11，则下面的屏幕录像显示了上面提供的实时演示功能。
面板整齐地咬合。 注意，当我滚动时，滚动动量会接管并前进到下一个框。 很活泼吧？
这是第二个演示，展示y轴以画廊风格显示图像。
当用户水平滚动时，动量降落到滚动端口和捕捉区域区域的死点，而与图像大小无关。
滚动捕捉属性和语法
现在是时候回顾和解释有关其语法和可接受值的实际属性。
当前的Scroll Snap规范仅包含四个属性，每个属性都起着重要的作用。 这四个属性是…
-
scroll-snap-type -
scroll-snap-align -
scroll-padding -
scroll-margin
让我们仔细看一下，并解释每个函数的作用，定义的位置以及可接受的值的类型。
scroll-snap-type
此属性指定滚动容器实际上是“ scroll snap container”还是“ snapport”，其捕捉的严格程度以及使用的轴。 如果未指定严格proximity值，则将默认值作为proximity值。 该属性还接受另一个有助于定义“捕捉轴”的值。 这将允许您传入两个选择的值（即， scroll-snap-type: y mandatory ）。 在这种情况下，我们要说明的是， snap-type仅出现在y轴上，并且是mandatory 。
Scroll Snap Axis: x ， y ， block ， inline或both
-
x：滚动容器仅在其水平轴上捕捉到捕捉位置。 -
y：滚动容器仅在其垂直轴上捕捉到捕捉位置。
-
block：滚动容器仅在其块轴上捕捉到捕捉位置。 -
inline：滚动容器仅在其内联轴上捕捉到捕捉位置。
-
both：滚动容器独立地捕捉到其两个轴上的位置（可能捕捉到每个轴上的不同元素）。
Scroll Snap Strictness ： none ， proximity和mandatory
-
none：如果在滚动容器上指定，则滚动容器不得对齐。 -
proximity：如果在滚动容器上指定，则在没有活动的滚动操作时，需要将滚动容器捕捉到捕捉位置。 如果存在可到达的捕捉位置，则滚动容器必须在滚动结束时捕捉（如果不存在，则不会发生捕捉）。 -
mandatory：如果在滚动容器上指定，则滚动容器可能会在滚动结束时对齐到对齐位置。
scroll-snap-align
scroll-snap-align属性将滚动容器的捕捉位置指定为其在捕捉容器的捕捉端口（作为对齐容器）内捕捉区域（作为对齐主题）的对齐方式。 这两个值分别指定内联轴和块轴的对齐对齐方式。 如果仅指定一个值，则第二个值默认为相同值。 接受的值是none ， center ， start和end 。
简而言之，此属性是为滚动容器的后续子级定义的，并且接受两个值。 第一个值代表x轴，而秒代表y轴； 例如... scroll-snap-align: start center 。
-
none：该框未在指定轴上定义捕捉位置。 -
start：在滚动容器的捕捉端口内此框的滚动捕捉区域的开始对齐是在指定轴上的捕捉位置。 -
end：此框的滚动捕捉区域在滚动容器的捕捉端口内的末端对齐是在指定轴上的捕捉位置。 -
center：此框的滚动捕捉区域在滚动容器的捕捉端口内的中心对齐是指定轴上的捕捉位置。
scroll-padding
声明时，滚动值充当滚动容器的偏移量，并减小被认为“可见”的可滚动区域。 这对布局，滚动原点，初始位置以及是否认为元素实际可见没有影响。 有两种形式，非常类似于CSS中的标准padding属性，但是也有一个长手版本，例如scroll-padding-top和scroll-padding-bottom 。
scroll-margin
这些值代表为滚动容器声明的初始值，该滚动容器定义了用于将项目捕捉到快照端口的滚动捕捉区域。 它的工作原理与margin属性相同，包括速记和速记的变体，例如scroll-margin-top和scroll-margin-bottom 。
离别的想法
由于当前的编辑草稿已发布了最新更新，因此您会发现缺乏全面的支持，并且没有我提到的polyfill。 scroll-snap-stop属性也有风险，并且可能在CR期间被删除。 我还在研究和实验中发现，此时在滚动捕捉容器上定义min-height无效。 可能还有其他具有相同结果的属性，如果找到这些属性，请在下面的注释中保留它们。
因此，这就是CSS Scroll的概述。 这值得么？ 您会觉得有用吗？ 还是应该将它放置在不再被发现的宇宙黑暗角落中？ 在下面留下您的评论，并且一如既往地祝您编程愉快！
资源资源
翻译自: https://webdesign.tutsplus.com/tutorials/how-to-scroll-snap-using-css--cms-30333
css:背景图片是否滚动
2035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
