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

场景重现

比如视频在页面中播放，当用户向下滚动页面时，假如视频元素不可见了，那么我们应该停止播放
相似的场景还有图片懒加载

简单思路

$(() => {
    // 只要将当前元素相对于窗口的高度+当前元素自身的高度和窗口的滚动距离做对比即可(注意要根据情况而定，对比参照物不一定是窗口，还有可能是父级div)
    setInterval(() => {
        console.log($('p').offset().top+$('p').outerHeight() > $(window).scrollTop())// true-可见 false-不可见
    }, 1000)
})

具体实现

• 确定对比参照物(比如是window)
• 监听对比参照物的scroll事件
• 对scroll事件进行函数节流和去抖
• 根据对比结果做出相应的回调

js函数去抖和节流示例