css CSS |滚动行为属性

CSS |滚动行为属性

原文:https://www.geeksforgeeks.org/css-scroll-behavior-property/

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

语法:

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

默认值:

自动

属性:

smooth: This property is used to specify the animation effect of scroll between the elements within the scrollable box.

语法:

html scroll-behavior:smooth;

示例:

```html <!DOCTYPE html>
                     CSS | scroll-behavior Property                               .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;             }
GeeksforGeeks

          Scroll-behaviour:smooth;

        geeksforgeeks

        GEEKSFORGEEKS
          A computer science portal for geeks.
                          ```
输出:
auto: It is used to specify the straight jump scroll effect visit to one link to another link within a scrolling box.

语法:

html scroll-behavior:auto;

示例:

```html <!DOCTYPE html>
                     CSS | scroll-behavior Property                               .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;             }
GeeksforGeeks

         scroll-behaviour:auto;

        geeksforgeeks

        GEEKSFORGEEKS
         A computer science portal for geeks.
                          ```
输出: