阅读 73

DOM元素动态监控

今天遇到一个一直认为很简单的问题,真正接手后才知道这么可怕

大体是这样的,默认动态加载的card应该是自动向下,当card遇到页面最下面应该自动向上渲染。

未
已
动态生成的DOM都是根据id来监听获取元素的信息。

坑1:当时数据较少没有考虑到card渲染方向,所以在页面下面的时候card加载到了浏览器之外

进坑1:当我一开始碰到这个bug时,so easy!!!所以加了一个判断条件,在函数@mouseenter获取触发点位置,然后加上一个页面高度和页面高度screen.height进行对比,然后对card进行移位,蒽,easy!!!

let rect = this.$el.getBoundingClientRect()
复制代码

判断函数
so,坑:很快,师傅过来啦,你这个写死啦,扩展性不好!内心毫无波澜,好,改成动态!


坑2:动态嘛,嗯嗯,就是换成动态判断条件就行啦!

进坑2:Google一下,百度一天,怎么检查新生成的DOM元素是否超出可视页面!结果搜到一堆判断scroll滚动元素的边境溢出!根本没有智能的自动检查函数,我平时也看到过有的网站是可以实现自动判断,所以一定可以解决!证明只有程序袁才是万能的,代码,呵!

so,坑:表示师傅看不下去啦,“你根据ID,利用$nextTick获得更新后的元素信息来获取DOM的信息!”


坑3:调研一下nextTick()函数,DOM更新后返回nextTick()里的操作,蒽。

坑4:立马开始获取动态弹出card的id,嗯嗯嗯嗯,找到了,通过控制台找到的,由于我用的是一个组件没有使用ref来注释,

出坑4:so,小case【找了两个小时,自闭】,通过this.$rootDOM树来查到元素id,这样找到的id每次都是动态的啦!

进坑3:问题很快来了,我通过id获取到元素的高度啦,但是每次顺序不对啊,每次dom渲染后在找到更新dom的信息。。。又仔细看了一下this.$nextTick(),en,DOM更新后,函数返回操作!!!换个思路,于是通过监控DOM树的变化来在第一时间来获取到dom变化的id并且获取DOM信息

let dom=document.getElementById(this.$root.$children.***.id)
dom.addEventListener('DOMNodeInserted', function(){
   let height=dom.getBoundingClientRect().height    
}, false)
复制代码

DOM事件
唉,结果和 $nextTick一毛一样,扎心啦,而且在这个监听函数里面使用函数之后,会一直获取到dom更新的信息,卡崩啦!

233,强行出来:嗯嗯,天要亡我!!静想,如果要实现避免动态的card页面生成到可视页面外,大概两种途径,第一种动态的判断位置条件,另一种是通过更加生成位置再次调整! 行吧,又回到坑3啦,显示给位置一个默认值,然后根据$nextTick()获取到的dom信息,然后根据鼠标位置,dom高度,可视化窗口高度document.body.clientHeight【上面的那个获取到的是电脑的信息】来判断,调整!!!!

/苦笑/苦笑,有更好的方法,求告知!!!

关注下面的标签,发现更多相似文章
评论