scrollIntoView 使用方法

scrollIntoView 使用方法

作用:

使元素滚动到可视区

它接受两种形式的值:布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动(老版)的浏览器。我们这里只说对象值。

使用方法: 

{

  behavior:"auto"|"instant"|"smooth",  // 默认 auto

  block:"start"|"center"|"end"|"nearest",  // 默认 center

  inline:"start"|"center"|"end"|"nearest",  // 默认 nearest

}

 对象有三个参数。

behavior

表示滚动方式。auto表示使用当前元素的scroll-behavior样式。instant和smooth表示直接滚到底和使用平滑滚动。

block

表示块级元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说,就是竖直方向。start表示将视口的顶部和元素顶部对齐;center表示将视口的中间和元素的中间对齐;end表示将视口的底部和元素底部对齐;nearest表示就近对齐。

inline

表示行内元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说,就是水平方向。其值与block类似。

scrollIntoView使用方法 - 简书 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_格鲁特宝宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值