html平滑滚动,如何滑动页面

　　背景

　　今天在写需求的时候，发现了一个小小的优化点：用户选择了一些数据后，对应列表中的数据需要高亮显示，有时候列表很长。为了提高用户体验，需要添加一个滚动条来自动滚动到目标位置。

　　经过简单的处理，问题顺利解决，在此分享一下这个小技巧。

　　正文

　　有几种不同的方法可以解决这个小问题。

　　1.scrollTop

　　首先想到的是scrollTop。获取元素的位置，然后直接设置它：

　　//设置滚动距离element.scrollTop=value但是有点僵硬，可以加个慢动作：

　　var scroll smooth to=function(position){ if(！window . requestanimationframe){ window . requestanimationframe=function(callback，element){ return setTimeout(callback，17)；};}//当前滚动高度var scroll top=document . document element . scroll top document . body . scroll top；//scroll step方法var step=function () {//滚动距离var distance=position-scrollTop距目标；//目标滚动位置scroll top=scroll top distance/5；if(math . ABS(distance)1){ window . scroll to(0，position)；} else { window.scrollTo(0，scroll top)；requestAnimationFrame(步骤)；} };step()；};//平滑滚动到顶部，可以直接：scrollmoothto(0)jQuery中的heavy animate方法也可以达到类似的效果：

　　$(xxx )。动画({ scroll top:0 })；2. scroll-behavior

　　滚动行为：平滑；编写滚动容器元素还可以平滑容器的滚动(不是由鼠标手势触发的)。list { scroll-behavior:smooth；}在PC上，网页的默认滚动在html标签上，移动端大部分在body标签上。然后这一行在全局css中定义：

　　html，body { scroll-behavior:smooth；}活泼。

　　3. scrollIntoView

　　方法让当前元素滚动到浏览器窗口的可视区域。

　　语法：

　　var element=document . getelementbyid( box )；element . scrollintoview()；//相当于element . scrollintoview(true)element . scrollintoview(align top)；//布尔参数element . scrollintoview(scrollintoviewoptions)；//对象类型参数的scrollIntoView方法接受两种形式的值：

　　布尔值

　　如果为true，元素的顶部将与其滚动区域的可视区域的顶部对齐。

　　对应的scrollintoviewoptions:{ block: start ，inline: nearest}。这是该参数的默认值。如果为false，元素的底部将与其滚动区域的可视区域的底部对齐。

　　对应的scrollintoviewoptions:{ block: end ，inline: nearest}。选项{行为：自动即时平滑，默认为自动。Block: start end ，默认为 start 。内嵌：开始居中结束，最近 .默认值为“最近”。}行为表示滚动模式。Auto表示使用当前元素的滚动行为样式。即时平滑是指直接滚动到底部，使用平滑滚动。指示块级元素的排列方向将滚动到的位置。对于默认的书写模式：水平-tb，它是垂直方向。开始意味着将视口的顶部与元素的顶部对齐；居中意味着将视口的中间与元素的中间对齐；End表示将视口的底部与元素的底部对齐；最近意味着最近对齐。Inline指示行中元素的排列方向应该滚动到的位置。对于默认的书写模式：horizontal-tb，它是水平方向。该值类似于block。scrollIntoView 浏览器兼容性

　　最后用了scrollIntoView，问题完美解决。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读