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