CSS中的卷轴快照：控制滚动操作

> css卷轴快照：毫不费力地创建光滑的滚动界面

> tiffany'scss Master的摘录，第二版>探索CSS滚动SCROLL SNAP模块，这是构建现代应用网络型体验的强大工具。 滚动快照允许精确控制滚动行为，在许多情况下消除了对JavaScript的需求。

> CSS滚动快照模块已经发展。 旧版本（Scroll Snap

点），在旧版本的Edge，Internet Explorer和Firefox之类的浏览器中实现，使用了基于像素的方法。 但是，现代浏览器（Chrome 69，Safari 11）使用了盒子对齐模型，这是这里的重点。 提防过时的教程，提及“点”或使用或scroll-snap-points-x>属性。scroll-snap-points-y>

>让我们构建一个简单的幻灯片以说明。 html非常简单：

>

<div>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341843771.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341850848.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341981083.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341944975.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915342067175.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img></div>

不需要额外的包装纸或JavaScript！ CSS进行繁重的举重：

* {
   box-sizing: border-box;
}

html, body {
    padding: 0; 
    margin: 0;
}

.slideshow {
  scroll-snap-type: x mandatory; /* Scroll axis and behavior */
  overflow-x: auto;              /* 'scroll' or 'auto' */
  display: flex;
  height: 100vh;
}

.slideshow img {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}

通过强制捕捉定义水平滚动。 scroll-snap-type: x mandatory>水平安排图像。 display: flex将每个图像集中在视口中。scroll-snap-align: center

要进行更深入的潜水，请咨询Google Web基础知识的指南，“与CSS滚动snap进行了良好控制的滚动。”

>

>常见问题

• >

  什么是CSS卷轴快照？它管理滚动位置，将视图捕捉到特定点。

>
• >它与常规滚动有何不同？滚动SNAP为更可预测的用户体验提供了定义的停止点。

  在容器上使用>

  >我如何实现？ 🎜>，
）在子元素上。

• scroll-snap-typex mandatory vution？y mandatoryboth mandatory，scroll-snap-align或start>指定轴； end>或center控制snap strictness。

• >浏览器支持？scroll-snap-type>由现代浏览器广泛支持，但请检查更新。 x yboth常见用例吗？

• 控制滚动速度？不是直接，而是通过调整快照点之间的距离而间接。

• 调试？使用浏览器开发人员工具（例如，Chrome's Scroll snap Highlighter）。

• 是的

以上是CSS中的卷轴快照：控制滚动操作的详细内容。更多信息请关注PHP中文网其他相关文章！