js 页面滚动时判断元素在页面中是否展示完全
时间: 2023-12-11 22:06:01 浏览: 31
可以通过获取元素的位置信息和页面的滚动信息来判断元素是否在页面中完全展示。具体的实现方式如下:
1. 获取元素的位置信息,包括元素的 top、left、width、height 等属性;
2. 获取页面的滚动信息,包括页面的 scrollTop 和 scrollLeft 属性;
3. 计算元素的底部和右侧边缘的位置信息,即 top + height 和 left + width;
4. 判断元素是否在页面中完全展示,即元素的 top 大于等于页面的 scrollTop,元素的底部小于等于页面的 scrollTop + 页面的高度,元素的 left 大于等于页面的 scrollLeft,元素的右侧边缘小于等于页面的 scrollLeft + 页面的宽度。
以下是一个示例代码:
```
function isElementInViewport(el) {
const rect = el.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
const windowWidth = window.innerWidth || document.documentElement.clientWidth;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= windowHeight &&
rect.right <= windowWidth
);
}
const element = document.getElementById('myElement');
if (isElementInViewport(element)) {
console.log('Element is fully visible in the viewport');
} else {
console.log('Element is not fully visible in the viewport');
}
```
在上述代码中,isElementInViewport 函数用于判断元素是否在页面中完全展示。如果元素完全展示,则返回 true,否则返回 false。使用 getElementById 函数获取需要判断的元素,然后调用 isElementInViewport 函数即可判断元素是否完全展示。