Vue列表滚动至指定位置，如何实现长尾词样式变化效果？

本文共计1408个文字，预计阅读时间需要6分钟。

这个需求大致是：我做的聊天Demo，搜索框搜索用户，可以滚动到指定用户。目前状态是，搜索南宫，想直接滚动到南宫用户。

这个需求大概是这样子：

我做的一个聊天Demo，在搜索框搜索用户，可以滚动到指定的用户。然后成选中状态。

这是目前状态，我搜索南宫仆射 ，想要下面的用户列表直接滚动到南宫仆射并改变CSS样式。

查询之后是这个子：

嗯，我的思路：

在搜索框搜索到用户之后会返回一个用户对象，之后会调用列表的点击事件，改变CSS样式及做一些聊天的逻辑。然后需要获取到列表对应的id值，直接使用 document.getElementById(it).scrollIntoView();

具体实现：

列表：使用vue的v-for指令 ，这里的id值使用的是遍历的索引值，外层是一个自定义滚动条组件。样式也是使用vue指令，一个语法糖。