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