JavaScript实现页面随着某元素自动滚动（歌词居中）

最新推荐文章于 2024-06-24 15:18:02 发布

浮生若梦777

最新推荐文章于 2024-06-24 15:18:02 发布

阅读量235

点赞数 1

分类专栏：前端(Vue/Javascript) 文章标签： javascript 前端服务器

本文链接：https://blog.csdn.net/qq_58626489/article/details/136210756

版权

前端(Vue/Javascript) 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在开发过程中想要使页面随着某个元素自动滚动，可以使用Element.scrollIntoView()。

下面举例一个歌词的居中显示

let lyc = document.querySelectorAll('.has-lyric li')[i] //获取当前播放的歌词

lyc.scrollIntoView({
     behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 。默认为 "auto"。
     block: "center", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"。默认为 "start"。
     inline: "center", // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"。默认为 "nearest"
  });//滚动到当前歌词位置

效果：页面自动滑动，播放的歌词居中