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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。