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

scroll-margin-block屬性用於將所有滾動邊距設置為一次滾動元素的開始和結束。該屬性是scroll-margin-block-start和scroll-margin-block-end屬性的簡寫。

開始和結束側的選擇取決於寫入模式。對於horizontal-tb寫入模式，開始側和結束側分別是頂側和底側。

其中horizontal-tb代表水平top-to-底部。

對於verticle-rl或verticle-lr寫入模式，開始側和結束側分別是左側和右側。

其中verticle-rl是從右到左的頂點，而verticle-lr是從左到右的頂點。

用法:

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

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

length:此屬性引用以長度單位(例如em，px，rem，vh等)定義的值。
Global_Values:此屬性引用全局值，例如Inherit，Initial，unset等。

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

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

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            .page { 
                width:278px; 
                height:296px; 
                box-sizing:border-box; 
                color:white; 
                font-size:60px; 
                display:flex; 
                align-items:center; 
                justify-content:center; 
                scroll-snap-align:end none; 
            } 
            .Container { 
                width:300px; 
                height:300px; 
                overflow-x:hidden; 
                overflow-y:auto; 
                white-space:nowrap; 
                scroll-snap-type:y mandatory; 
            } 
        </style> 
    </head> 
    <body> 
        <div class="Container"> 
            <div class="page" 
                 style="background-color:rgb(95, 236, 14);  
                        scroll-margin-block:90px;"> 
                Geeks 
            </div> 
  
            <div class="page" 
                 style="background-color:rgb(25, 143, 25); 
                        scroll-margin-block:90px;"> 
                for 
            </div> 
  
            <div class="page" 
                 style="background-color:rgb(110, 228, 129);  
                        scroll-margin-block:90px;"> 
                Geeks 
            </div> 
  
            <div class="page" 
                 style="color:black;  
                        scroll-margin-block:90px;"> 
                for 
            </div> 
  
            <div class="page" 
                 style="background-color:rgb(25, 143, 25);  
                        scroll-margin-block:90px;"> 
                Geeks 
            </div> 
        </div> 
    </body> 
</html>

輸出：

支持的瀏覽器：

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

相關用法

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