search

haizlin / fe-interview

前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），6000+道前端面试题全面覆盖，HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.52k stars 3.26k forks source link

[js] 第645天 写一个JS方法，判断元素是否在可视区域 #3461

Open haizhilin2013 opened 3 years ago

haizhilin2013 commented 3 years ago

第645天 写一个JS方法，判断元素是否在可视区域

3+1官网

我也要出题

xujs0813 commented 3 years ago 
// 判断元素是否在视口中
function isEleVisible(ele){
    var {top, right, bottom, left} = ele.getBoundingClientRect()
    var w = window.innerWidth
    var h = window.innerHeight
    if(bottom < 0 || top > h){
        // y 轴方向
        return false
    }
    if(right < 0 || left > w){
        // x 轴方向
        return false
    }
    return true
}
fanerge commented 3 years ago

使用 IntersectionObserver 实现，性能更好 IntersectionObserver

// 默认以 viewport 为观察容器
var intersectionObserver = new IntersectionObserver(function(entries) {
  // todo 如懒加载等

});
// start observing
intersectionObserver.observe(document.querySelector('#loadVideo'));
// 合适的时机停止监听
intersectionObserver.unobserve(document.querySelector('#loadVideo'))