高校网站开发/昭通网站seo

直接上代码

function elementIsVisibleInViewport(el, partiallyVisible = false) {// 第一个参数是element  第二个参数是 是否部分可见也算可见  // 设置为false 即有一部份不可见即不可见// 设置为true 即部分可见即算是可见const {top,left,bottom,right} = el.getBoundingClientRect();const {innerHeight,innerWidth} = window;return partiallyVisible ?((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) :top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
}// 调用 测试
function test() {let show = document.querySelector("#show");console.log(elementIsVisibleInViewport(show, true))
}

代码解析

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

返回值是一个对象，这个对象是一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

以可视区域左上角为坐标 0， 0

left代表element的左侧边缘到可视区左侧的距离

right 代表element的右侧边缘到可视区左侧的距离

top 代表 element 的上边缘到可视区域上边的距离

bottom 代表  element 的下边缘到可视区域上边的距离

通过这四个值和可视区域的宽高即可判断。