美文网首页
判断元素是否在可视范围内或是否滚动到底部

判断元素是否在可视范围内或是否滚动到底部

作者: 苦瓜_6 | 来源:发表于2018-09-17 22:34 被阅读0次

判断元素是否在可视范围内

function isVisible(img) {  // 判断元素是否在可视范围
    let {top, right, bottom, left} = img.getBoundingClientRect();
    let vpWidth = document.documentElement.clientWidth;
    let vpHeight = document.documentElement.clientHeight;
    if (((top > 0 && top < vpHeight) || (bottom > 0 && bottom < vpHeight )) && ((right > 0 && right < vpWidth) || (left > 0 && left < vpWidth))) {
        return true
    }
}

判断是否滚动到底部

function  isToBottom() {
        return (document.body.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight) < 5
        // 页面内容高度 - 滚动距离 - 窗口高度; 这种判断方法的好处是不用埋节点来判断是否滚动到底部
         // document.body.scrollTop总是 0 : https://www.jianshu.com/p/b0a39995b11f
    }

相关文章

  • 判断元素是否在可视范围内或是否滚动到底部

    判断元素是否在可视范围内 判断是否滚动到底部

  • CSS题

    判断元素是否滚动到底部元素滚动到底部时,它的 scrollHeight - scrollTop 等于 client...

  • js上拉加载(判断页面是否滚动到底部)

    js上拉加载(非元素。body的滚动条) 滚动条在元素上在下篇文章~~~ 判断页面是否滚动底部: demo

  • 计算cell是否在可视范围

    1、使用场景: 在tableview滚动时,判断特定cell是否在可视范围内。 2、原理分析: 在tablevie...

  • Vue 使用getBoundingClientRect()判断某

    场景:判断某个元素是否出现了可视区域,根据是否在可视区域来执行不同动作; 比如第一屏未出现支付按钮时,显示底部悬浮...

  • 通过Jquery判断页面元素是否在浏览器的可视区域内

    前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是JavaSc...

  • UICollectionView 用 MJRefresh只能上拉

    判断是否滚动到底部,如果滚动到底部,只手动执行刷新方法 (void)scrollViewDidEndDeceler...

  • 懒加载

    如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。 当窗口滚动时,判断一个元素是不是...

  • 懒加载+木桶布局

    如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。 当窗口滚动时,判断一个元素是不是...

  • 懒加载

    如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。 当窗口滚动时,判断一个元素是不是...

网友评论

      本文标题:判断元素是否在可视范围内或是否滚动到底部

      本文链接:https://www.haomeiwen.com/subject/ylvpvftx.html