加入收藏 | 设为首页 | 会员中心 | 我要投稿 惠州站长网 (https://www.0752zz.com.cn/)- 办公协同、云通信、物联设备、操作系统、高性能计算!
当前位置: 首页 > 建站 > 正文

html中dom元素滚动条滚动控制小结详解

发布时间:2020-06-16 16:40:43 所属栏目:建站 来源:站长网
导读:副标题#e# 不知道大家有没有遇到过这样的需求,在某个 dom 元素中添加新的子元素,然后要求如果新添加的新元素超出容器的范围,那么我们需要自动滚动到新添加的子元素的位置,如下图所示效果: 那么接下来我们一边学习一些 dom 元素滚动相关的知识点,一边

function scrollToElement(containerEl,el){ //因为getBoundingClientRect().top即为子元素顶部距离父元素顶部的距离,所以这个值就是子元素相对于父元素的偏移量,我们传入这个值到scrollBy中,即滚动到指定元素 containerEl.scrollBy(0,el.getBoundingClientRect().top); }

滚动到底部:

function scrollToBottom(containerEl){ let dy=containerEl.scrollHeight-containerEl.clientHeight; containerEl.scrollBy(0,dy); }

滚动到顶部

function scrollToTop(containerEl){ let dy=-(containerEl.scrollHeight-containerEl.clientHeight); containerEl.scrollBy(0,dy); }

添加动画

这里我们修改一下动画生成的函数,因为这里我们 scrollBy() 的参数就是变量的偏移量,所以做出如下修改:

function scrollToBottom(containerEl){ if(!containerEl){ containerEl=container; } //dy即为偏移量 let dy=containerEl.scrollHeight-containerEl.clientHeight; let scrollAnimationFn=doAnimation(dy,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } function scrollToTop(containerEl){ if(!containerEl){ containerEl=container; } //dy即为偏移量 let dy=-(containerEl.scrollHeight-containerEl.clientHeight); let scrollAnimationFn=doAnimation(dy,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } function scrollToElement(containerEl,el){ if(!containerEl){ containerEl=container; } if(!el){ let input=document.getElementsByTagName('input')[0]; let+input.value; if(!input.value){+index; } el=document.getElementById(id); } //dy即为偏移量 let dy=el.getBoundingClientRect().top; let scrollAnimationFn=doAnimation(dy,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } /** * @description: * @param {type} * @return: */ function doAnimation(dy,duration,el){ //使用闭包保存变量exe_dy和step等变量(每次动画滚动的距离) let exe_dy=0;//已经执行的偏移量 let step=dy/(duration/10); return function(interval){ exe_dy+=step; if(Math.abs(exe_dy)>=Math.abs(dy)){ clearInterval(interval); } el.scrollBy(0,step); } }

执行效果与使用 scrollTop 实现一致。

最后

以上:point_up_2:就是自己对dom滚动条控制的详细总结和讲解,以及一些基本使用方法。

到此这篇关于html中dom元素滚动条滚动控制小结详解的文章就介绍到这了,更多相关dom元素滚动条滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

(编辑:惠州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读