永发信息网

如何判断指定dom元素是否在屏幕内

答案:1  悬赏:40  手机版
解决时间 2021-03-19 07:55
  • 提问者网友:書生途
  • 2021-03-18 23:20
如何判断指定dom元素是否在屏幕内
最佳答案
  • 五星知识达人网友:一秋
  • 2019-09-15 18:47
当dom元素的中心坐标的X及Y坐标均小于显示窗口的顶部,且大于显示窗口的底部坐标时,那么就可以判断该坐标在可见区域。 
首先是窗口的顶部坐标,顶部坐标就是页面的滚动条滚动的距离。 
其次是底部坐标,底部坐标就是滚动条的距离加上当前可视窗口的高度。 
最后dom元素的中心距离,就是这个dom元素到最顶端的高度加上自身高度的除2
var visibleBottom = window.scrollY + document.documentElement.clientHeight;
            //可见区域顶部高度
            var visibleTop = window.scrollY;

            for (var i = 0; i < box.length; i++) {
                var centerY = box[i].offsetTop+(box[i].offsetHeight/2);
                if(centerY>visibleTop&¢erY                     box[i].innerHTML = '区域可见'
                    box[i].setAttribute("class",'box animate')
                    console.log('第'+i+'个区域可见');
                }else{
                    box[i].innerHTML = '';
                    box[i].setAttribute("class",'box')
                    console.log('第'+i+'个区域不可见');
                }
            }。
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息
大家都在看
推荐资讯