> css卷軸快照：毫不費(fèi)力地創(chuàng)建光滑的滾動(dòng)界面

> tiffany'scss Master的摘錄，第二版>探索CSS滾動(dòng)SCROLL SNAP模塊，這是構(gòu)建現(xiàn)代應(yīng)用網(wǎng)絡(luò)型體驗(yàn)的強(qiáng)大工具。 滾動(dòng)快照允許精確控制滾動(dòng)行為，在許多情況下消除了對(duì)JavaScript的需求。

> CSS滾動(dòng)快照模塊已經(jīng)發(fā)展。 舊版本（Scroll Snap

點(diǎn)），在舊版本的Edge，Internet Explorer和Firefox之類(lèi)的瀏覽器中實(shí)現(xiàn)，使用了基于像素的方法。 但是，現(xiàn)代瀏覽器（Chrome 69，Safari 11）使用了盒子對(duì)齊模型，這是這里的重點(diǎn)。 提防過(guò)時(shí)的教程，提及“點(diǎn)”或使用或scroll-snap-points-x>屬性。scroll-snap-points-y>

>讓我們構(gòu)建一個(gè)簡(jiǎn)單的幻燈片以說(shuō)明。 html非常簡(jiǎn)單：

>

<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進(jìn)行繁重的舉重：

* {
   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;
}

通過(guò)強(qiáng)制捕捉定義水平滾動(dòng)。 scroll-snap-type: x mandatory>水平安排圖像。 display: flex將每個(gè)圖像集中在視口中。scroll-snap-align: center

要進(jìn)行更深入的潛水，請(qǐng)咨詢(xún)Google Web基礎(chǔ)知識(shí)的指南，“與CSS滾動(dòng)snap進(jìn)行了良好控制的滾動(dòng)。”

>

>常見(jiàn)問(wèn)題

• >

  什么是CSS卷軸快照？它管理滾動(dòng)位置，將視圖捕捉到特定點(diǎn)。

>
• >它與常規(guī)滾動(dòng)有何不同？滾動(dòng)SNAP為更可預(yù)測(cè)的用戶(hù)體驗(yàn)提供了定義的停止點(diǎn)。

  在容器上使用>

  >我如何實(shí)現(xiàn)？ ??>，
）在子元素上。

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

• >瀏覽器支持？scroll-snap-type>由現(xiàn)代瀏覽器廣泛支持，但請(qǐng)檢查更新。 x yboth常見(jiàn)用例嗎？

• 控制滾動(dòng)速度？不是直接，而是通過(guò)調(diào)整快照點(diǎn)之間的距離而間接。

• 調(diào)試？使用瀏覽器開(kāi)發(fā)人員工具（例如，Chrome's Scroll snap Highlighter）。

• 是的

以上是CSS中的卷軸快照：控制滾動(dòng)操作的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！