Vue JS - 我如何滚动（聚焦）到“活动”li 元素？答案

【问题标题】：Vue JS - How can i scroll (focus) to the 'Active' li element?Vue JS - 我如何滚动（聚焦）到“活动”li 元素？
【发布时间】：2018-10-22 11:33:41
【问题描述】：

我有一个无序列表，里面有一堆 li 元素。当使用箭头键上下移动列表（突出显示当前列表并将该 li 元素的 Active 类设置为 true ）时，我希望模态滚动（聚焦）在具有 Active 类的 li 元素上设置为真。

我该怎么做呢？

【问题讨论】：

你试过什么？我在谷歌上搜索“vue scroll to certain element on page”没有问题。您甚至可以使用 Vue NPM 包。
或者只是谷歌“javascript Element.scrollIntoView()”
我试过这个。$el.getElementsByClassName("active")[0]scrollIntoView();但希望它只有在我到达模态中可见 li 元素的底部时才开始滚动:)

【解决方案1】：

模型是什么意思？用户的视口？

然后你需要创建一个方法并调用它，类似于以下内容：

 window.scrollBy({
   top: targetYourElementHere.getBoundingClientRect().top,
   behavior: 'smooth'
 })

【讨论】：

对不起，我的意思是模态*。我希望当我按下向下箭头并到达屏幕列表的底部时，它会开始向下滚动列表到其他 li 元素。
不用担心，是的，这适用，在将活动类分配给 li 元素后立即调用的方法。
补充一点，我不会使用“scrollIntoView()”，因为目前还没有得到很好的支持：caniuse.com/#feat=scrollintoview 而 scrollby() 几乎在所有地方都得到了支持。