在开发过程中想要使页面随着某个元素自动滚动,可以使用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"});//滚动到当前歌词位置
效果:页面自动滑动,播放的歌词居中