背景今天在写需求的时候，发现了一个小优化点：用户选中某条数据后，对应列表中的数据需要高亮显示。有时列表很长。为了提高用户体验，需要添加一个滚动条，自动滚动到目标位置。经过简单的处理，问题顺利解决，就把这个小技巧分享给大家。文字有几种不同的方法来解决这个小问题。1.scrollTop首先想到的是scrollTop，获取元素的位置，然后直接set//设置滚动距离element.scrollTop=value;但这有点生硬，你可以添加一个慢动作：};}//当前滚动高度varscrollTop=document.documentElement.scrollTop||文档.正文。滚动顶部；//滚动步长方法varstep=function(){//从目标滚动的距离vardistance=position-scrollTop;//目标滚动位置scrollTop=scrollTop+distance/5;如果(Math.abs(distance)<1){window.scrollTo(0,position);}else{window.scrollTo(0,scrollTop);requestAnimationFrame（步骤）；}};step();};//平滑滚动到顶部,可以直接:scrollSmoothTo(0)jQuery中的heavyanimate方法也可以实现类似的效果:$('xxx').animate({scrollTop:0});2.scroll-behavior写scroll-behavior:smooth;在滚动容器元素上，也可以使容器的滚动（不是由鼠标手势触发）平滑。.list{滚动行为：平滑；}在PC端，网页默认的滚动是在标签上，移动端大部分是在
标签上。然后这一行在全局css中定义为：html,body{scroll-behavior:smooth;}美丽的。3.scrollIntoViewElement.scrollIntoView()方法，让当前元素滚动到浏览器窗口的可见区域。语法：varelement=document.getElementById("box");元素.scrollIntoView();//等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop);//布尔型参数element.scrollIntoView(scrollIntoViewOptions);//对象类型参数scrollIntoView方法接受两种形式的值：布尔值如果为true，则元素的顶部将与其所在的滚动区域的可见区域的顶部对齐。对应的scrollIntoViewOptions:{block:"start",inline:"nearest"}。这是此参数的默认值。如果为false，则元素底部将与其所在滚动区域的可见区域底部对齐。对应的scrollIntoViewOptions:{block:"end",inline:"nearest"}。选项对象{行为：“自动”|“即时”|“平滑”，默认为“自动”。块：“开始”|“结束”，默认为“开始”。内联：“开始”|“中心”|“结束”，|“最近的”。默认为“最近”。}行为意味着滚动。auto表示使用当前元素的滚动行为样式。instantandsmooth意味着直接滚动到底部并使用平滑滚动。block指示在块级元素排列方向上滚动到的位置。对于默认的writing-mode:horizo??ntal-tb，就是垂直方向。start表示将视口的顶部与元素的顶部对齐；center表示将视口的中间与元素的中间对齐；end表示将视口的底部与元素的底部对齐；最近的意思是对齐到最近的。inline表示要滚动到行中元素排列方向的位置。对于默认的writing-mode:horizo??ntal-tb，就是水平方向。它的值类似于块。scrollIntoView浏览器兼容性最后使用了scrollIntoView，完美解决了问题。最后，没有什么很新的东西，就介绍一下这个小技巧，希望能给小伙伴们一些启发。关注我如果你觉得这篇内容对你很有启发，那就关注我吧~更多精彩：聊一聊ESM、Bundleless、Vite、Snowpack记得一个“无限列表”滚动优化“面试三招”代码分割（上）Cache的”面试三招”（上）“面试三招”的缓存（下）“面试三招”的HTTP（上）“面试三招”的HTTP（下）“面试三招”的this