场景重现
比如视频在页面中播放,当用户向下滚动页面时,假如视频元素不可见了,那么我们应该停止播放
相似的场景还有图片懒加载
简单思路
$(() => {
// 只要将当前元素相对于窗口的高度+当前元素自身的高度和窗口的滚动距离做对比即可(注意要根据情况而定,对比参照物不一定是窗口,还有可能是父级div)
setInterval(() => {
console.log($('p').offset().top+$('p').outerHeight() > $(window).scrollTop())// true-可见 false-不可见
}, 1000)
})
具体实现
- 确定对比参照物(比如是window)
- 监听对比参照物的scroll事件
- 对scroll事件进行函数节流和去抖
- 根据对比结果做出相应的回调