我们今天来实现一下,点击当前用户的div, 自动滚动到用户在排行榜中的位置.
效果
大家可以先看一下下面的GIF, 所实现的效果.
实现
1....我们只要保证每个列表的自定义的属性是唯一的即可.
2. 绑定方法,实现方法
接下来,我们需要考虑的是,在点击的时候,如何获取到当前的dom....简单来讲就是被调用的者的元素出现在用户的视线里面. scrollIntoView() 方法有三种调用形式:
scrollIntoView():无参数调用,元素将滚动到可视区域顶部,如果它是第一个可见元素...但是我们发现,还可以继续改进, 目前我们虽然滚动到了屏幕的中间, 但是我们很难去发现. 所以我们可以继续完善一下这个方法. 就是滚动到视图的中间的同时高亮选中的DOM.
3....点击之后,拿到id,透传给方法,然后通过id获取到当前的元素.
使用Element.scrollIntoView(), 将当前的选中的DOM自动滚动视图的中间.