CSS scroll-margin-left屬性用法及代碼示例

scroll-margin-left屬性用於一次將所有滾動邊距設置到元素的左側。為scroll-margin-left指定的值確定應該主要顯示在支持範圍之外的頁麵的多少。

因此，scroll-margin-left值代表定義了滾動捕捉區域的起點，該區域用於將該框捕捉到支撐。

用法:

scroll-margin-left:length
/* Or */
scroll-margin-left:Global_Values

屬性值：該屬性接受上麵提到並在下麵描述的two-properties：

length：此屬性引用以長度單位定義的值：px，em，rem，vh等。
Global_Values:此屬性引用諸如繼承，未設置，初始等的全局值。

注意：scroll-margin-left不接受百分比值作為長度。

例：在此示例中，通過滾動到示例內容的“interfaces”中的兩個之間的一個點，可以看到scroll-margin-left的效果。

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            .img { 
                width:296px; 
                height:275px; 
                scroll-snap-align:none end; 
            } 
            .photo { 
                width:300px; 
                height:300px; 
                overflow-x:auto; 
                overflow-y:hidden; 
                white-space:nowrap; 
                scroll-snap-type:x mandatory; 
            } 
        </style> 
    </head> 
    <body> 
        <div class="photo"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img8.jpeg" 
                 class="img" 
                 style="scroll-margin-left:1rem;" /> 
  
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png" 
                 class="img" 
                 style="scroll-margin-left:2rem;" /> 
  
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131445/img1-300x214.jpg" 
                 class="img" 
                 style="scroll-margin-left:3rem;" /> 
  
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131447/img9.jpeg" 
                 class="img"
                 style="scroll-margin-left:4rem;" /> 
        </div> 
    </body> 
</html>

輸出：

支持的瀏覽器：

Chrome
Firefox
Edge
Opera
Safari(partially supported)
Internet Explorer(不支持)

相關用法

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