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

本文主要是介绍jq判断一个元素是否在可视范围内，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

场景重现

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

简单思路

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

具体实现

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

js函数去抖和节流示例

这篇关于jq判断一个元素是否在可视范围内的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---