CSS scroll-snap-align屬性用法及代碼示例

CSS scroll-snap-align屬性表示框的捕捉區域在元素或容器的捕捉端口中的捕捉位置。

用法:

scroll-snap-align:Keyword_Values;
/* Or */
scroll-snap-align:Global_Values;

屬性值：scroll-snap-align屬性接受上麵提到和下麵描述的兩個值：

keyword_Values:此屬性引用關鍵字值，例如none，start，end，center等。
Global_Values:此屬性引用全局值，例如Inherit，Initial，unset等。

注意：設置兩個屬性值時，第一個用於塊，第二個用於內聯。前任。 scroll-snap-align：開始結束；

範例1：在此示例中，通過滾動到示例內容的“interfaces”中的兩個之間的一個點，可以看到scroll-snap-align的效果。在這裏，我們沒有使用start作為屬性值。

<!DOCTYPE html> 
<html> 
  
    <head> 
        <style> 
  
            .geeks { 
                width:255px; 
                height:300px; 
                border:4px solid greenyellow; 
                scroll-snap-align:none start; 
            } 
            .Container { 
                width:300px; 
                height:300px; 
                border:5px solid red; 
                overflow-x:auto; 
                overflow-y:hidden; 
                white-space:nowrap; 
                scroll-snap-type:x mandatory; 
                scroll-snap-stop:always; 
            } 
  
        </style> 
    </head> 
  
<body> 
  
    <div class="Container"> 
  
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png"
        class="geeks"> 
  
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5.jpeg" 
        class="geeks"> 
  
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png" 
        class="geeks"> 
  
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png"
        class="geeks"> 
  
    </div> 
  
</body> 
  
</html>

輸出：

支持的瀏覽器：

chrome 合金。
火狐瀏覽器。
蘋果瀏覽器。
邊。
Opera 。
Internet Explorer(不支持)。

相關用法

注：本文由純淨天空篩選整理自thacker_shahid大神的英文原創作品 CSS scroll-snap-align property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。