CSS scroll-behavior用法及代码示例

此属性用于滚动位置而不是滚动跳转的平滑动画。当用户单击链接时，它将平稳地执行其操作。它用于访问可滚动框中一个链接到另一个链接。

用法:

scroll-behavior:auto|smooth|initial|inherit;

属性：

smooth:此属性用于指定可滚动框中的元素之间滚动的动画效果。

用法:

scroll-behavior:smooth;

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS | scroll-behavior Property 
        </title> 
        <style> 
            .g4g { 
                font-size:40px; 
                font-weight:bold; 
                color:green; 
                text-align:center; 
            } 
            html { 
                scroll-behavior:smooth; 
            } 
              
            #geeks { 
                height:400px; 
                background-color:coral; 
            } 
            #gfg { 
                height:400px; 
                background-color:lightblue; 
            } 
            a { 
                text-decoration:none; 
                font-size:25px; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "g4g">GeeksforGeeks</div> 
        <h2 style="text-align:center;"> 
          Scroll-behaviour:smooth;  
        </h2> 
          
        <div class="main" id="geeks"> 
        <a href="#gfg">geeksforgeeks</p> 
        </div> 
          
        <div class="main" id="gfg"> 
        <a href="#geeks">GEEKSFORGEEKS</a> 
        <p style="color:green;"> 
          A computer science portal for geeks. 
        </h3>  
        </div> 
    </body> 
</html>

输出：

auto:它用于指定直接跳转滚动效果访问滚动框中一个链接到另一个链接。

用法:

scroll-behavior:auto;

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS | scroll-behavior Property 
        </title> 
        <style> 
            .g4g { 
                font-size:40px; 
                font-weight:bold; 
                color:green; 
                text-align:center; 
            } 
            html { 
                scroll-behavior:auto; 
            } 
              
            #geeks { 
                height:400px; 
                background-color:coral; 
            } 
            #gfg { 
                height:400px; 
                background-color:lightblue; 
            } 
            a { 
                text-decoration:none; 
                font-size:25px; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "g4g">GeeksforGeeks</div> 
        <h2 style="text-align:center;"> 
         scroll-behaviour:auto; 
        </h2> 
          
        <div class="main" id="geeks"> 
        <a href="#gfg">geeksforgeeks</p> 
        </div> 
          
        <div class="main" id="gfg"> 
        <a href="#geeks">GEEKSFORGEEKS</a> 
        <p style="color:green;"> 
         A computer science portal for geeks. 
        </h3>  
        </div> 
    </body> 
</html>

输出：

支持的浏览器：下面列出了scroll-behavior属性支持的浏览器：

谷歌浏览器61.0
Firefox 36.0
Opera 48.0

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 CSS | scroll-behavior Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。