js 判断dom 元素是否显示在屏幕中

在混合app 开发使用apiCloud 时候我们需要对dom 元素进行是否显示在屏幕中检查时候

该方案也可以适用于pc端或者其他移动端

先创建事件

if (api.systemType == "ios") {
    document.addEventListener('touchmove', function() {
          checkScroll();
    }, false);

    window.onscroll = function() {
           checkScroll();
    }
 } else {
     window.onscroll = function() {
            checkScroll();
     }
 }

api.systemType 为apiCloud 判断是否为ios 设备的方法

判断元素

var itemDom;// You want to check

function checkScroll() {
    //滚动条高度+视窗高度 = 可见区域底部高度
    var visibleBottom = window.scrollY + document.documentElement.clientHeight;
    //可见区域顶部高度
    var visibleTop = window.scrollY;

    var centerY = itemDom.offsetTop + (itemDom.offsetHeight * 0.8);
    var show = centerY > visibleTop && centerY < visibleBottom;     
    if (show ) {
        // showing          
    }else{
        // hidden
    }
}