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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。