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
    }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值