技術標籤：csscsscss-snapcss-snap-typecss-snap-align

1、 效果:

2、程式碼

css:

.list {
    display: flex;
    flex-direction: row;
    overflow: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
}
.content {
    flex-wrap: 0;
    flex-shrink: 0;
    height: 100px;
    width: 300px;
    scroll-snap-align: start;
    display: inline-block;
    text-align: center;
    font-size: 48px;
}
 

html:

<div class="list">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</
 
div>
</div>

語法介紹

scroll-snap-type

• none: 預設值，忽略捕捉位置
• x: 捕捉水平軸上的定位點
• y: 捕捉垂直軸上的定位點
• block: 捕捉塊元素排列軸上的定位點
• inline: 捕捉內聯元素排列方向上的定位點
• both: 捕捉水平軸和垂直軸上的定位點
• mandatory: 容器的可視檢視將“強制”靜止在臨時點上，無論是新增、刪除、移動或者大小改變。
• proximity: 如果它當前沒有被滾動，這個滾動容器的可視檢視將基於基於使用者代理滾動的引數去到臨時點上。如果內容被新增、移動、刪除或者重置大小，滾動偏移將被調整為保持靜止在臨時點上。

scroll-snap-align

這個屬性作用在子元素上。

• none: 不定義捕捉位置
• start: 起始位置對其
• end: 結束為止對其
• center: 子元素的中心與容器的中心對齊。

scroll-snap-align: none;
scroll-snap-align: start end; /start: 表示塊元素方向的定位方式，end: 表示內聯元素的定位方式。/
scroll-snap-align: center;