CSS scroll-behavior

àì夳堔傛蜴生んèń 2024-05-24 03:04 26阅读 0赞

### `scroll-behavior` ###

> 当滚动通过导航或者 `CSSOM` 滚动 `API` 触发时的滚动行为

只有两个关键字属性值.

*  `auto`: 立刻滚动到目标位置
 *  `smooth`: 平滑的滚动.

?注意除了上面两种滚动触发外的任何滚动, 比如用户使用鼠标滚动, 都不会被这个属性影响.

当这个属性在定义在 `<html>` 标签, 其作用域整个视窗. 如果这个属性定义在 `<body>` 将不会作用于视窗.

?浏览器可以忽略这个属性的值?

先看代码

.container {
        
      height: 200px;
      border: 1px solid #111;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }
    .section {
        
      font-size: 48px;
      text-align: center;
      height: 100%;
      line-height: 200px;
    }

上面我们是通过 `<a>` 标签的 `href` 属性链接到页面的不同位置从而实现的滚动.  
![在这里插入图片描述][83c729f15c1142efb99ab7647287e030.gif_pic_center]

接下来通过 `JavaScript` 修改网页 `URL` 中的 `hash` 部分实现滚动, 再来看效果  
![在这里插入图片描述][de6b9c0e86c94015b8b83147477c4b17.gif_pic_center]

?不仅仅纵向可以滚动, 横向也可以哦  
![在这里插入图片描述][83b57bec68964286aef35b0da8d7e887.gif_pic_center]

### 回到顶部 ###

因此, 可以实现简单的回到顶部的效果. 只需要将 `<a>` 标签的 `href` 属性设置为 `#` 或者 `#top` 即可

.back-to-top {
        
      width: 50px;
      height: 50px;
      text-align: center;
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      border-radius: 50%;
      background-color: #e74c3c;
      box-shadow: 1px 1px 10px 10px rgba(0, 0, 0, .1);
    }
    .back-to-top a {
        
      line-height: 50px;
    }
    html {
        
      scroll-behavior: smooth;
    }

?注意, 如果要实现平滑的滚动, 一定要给 `html` 添加 `scroll-behavior` 而不是给 `body` 添加!!!不然没有效果的  
![在这里插入图片描述][d3f6bb0de29443ae8187df3a569636a4.gif_pic_center]

[83c729f15c1142efb99ab7647287e030.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/25ddc3a026bf4097800b5b64bbab316d.gif
[de6b9c0e86c94015b8b83147477c4b17.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/d33806558b8242db98ef7d04b70416f1.gif
[83b57bec68964286aef35b0da8d7e887.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/2ebb336122904cf8b3e8b38a94a9d01a.gif
[d3f6bb0de29443ae8187df3a569636a4.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/6a5a8aecbec64ef09980013f7cae5241.gif