滾動界限種類 | scroll-snap-type (Scroll Snap) - CSS 中文開發手冊 - Break易站

  CSS 中文開發手冊

滾動界限種類 | scroll-snap-type (Scroll Snap) - CSS 中文開發手冊

這是一種實驗技術

由於該技術的規格不穩定，請查看各種瀏覽器的兼容性表格以供使用。另外請注意，隨着規范的變化，實驗技術的語法和行為在未來版本的瀏覽器中可能會發生變化。

該scroll-snap-type CSS屬性定義捕捉點是如何嚴格的情況下，有一個滾動容器上強制執行。

指定用於執行這些捕捉點的精確動畫或物理屬性不屬於此屬性，而是留給用戶代理。

/* Keyword values */
scroll-snap-type: none;
scroll-snap-type: mandatory;
scroll-snap-type: proximity;

/* Global values */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;

初始值	none
適用於	滾動容器
遺傳	沒有
媒體	interactive
計算值	作為指定
動畫類型	離散的
規范的順序	形式語法定義的獨特的非模糊順序

語法

值

none當滾動此滾動容器的可視視口時，它必須忽略捕捉點。

mandatory如果當前沒有滾動，則此滾動容器的可視視口將停留在捕捉點上。這意味着，如果可能的話，當滾動操作完成時，它會捕捉到這一點。如果內容被添加，移動，刪除或調整大小，則會調整滾動偏移以保持該捕捉點上的靜止。

proximity如果考慮到用戶代理的滾動參數，該滾動容器的視覺視口如果當前沒有滾動，則可能停留在快照點上。如果添加，移動，刪除或重新調整內容，則可以調整滾動偏移以保持在該捕捉點上的靜止。

形式語法

none | mandatory | proximity

例

HTML內容

<div class="container mandatoryScrollSnapping">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container proximityScrollSnapping">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS內容

.container {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  font-size: 0;
}

.mandatoryScrollSnapping {
  margin-bottom: 20px;
  scroll-snap-type: mandatory;
}

.proximityScrollSnapping {
  scroll-snap-type: proximity;
}

.container > div {
  width: 100%;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
}

.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}

規范

Specification	Status	Comment
CSS Scroll Snap Module Level 1The definition of 'scroll-snap-type' in that specification.	Candidate Recommendation	Initial definition

瀏覽器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	No support	39.0 (39.0)	10-ms-	No support	9-webkit-

Feature	Android	Firefox Mobile (Gecko)	Firefox OS	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support	39.0 (39.0)1	39.0 (39.0)	No support	No support	9-webkit-

  CSS 中文開發手冊

  本文標題： 滾動界限種類 | scroll-snap-type (Scroll Snap) – CSS 中文開發手冊 - Break易站

轉載請保留頁面地址：https://www.breakyizhan.com/css/32115.html