scrollIntoView使用方法

109 阅读1分钟

作用:使元素滚动到可视区

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


{
    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类似。