js实现视口
js实现视口检测的方法
使用JavaScript检测元素是否进入视口（viewport）可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法：
Intersection Observer API方法（推荐）
Intersection Observer是现代浏览器提供的API，性能高效且易于使用：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('元素进入视口');
// 执行需要的操作
} else {
console.log('元素离开视口');
}
});
});
const targetElement = document.querySelector('.target');
observer.observe(targetElement);手动计算元素位置方法
通过getBoundingClientRect()计算元素相对于视口的位置：
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
window.addEventListener('scroll', () => {
const element = document.querySelector('.target');
if (isInViewport(element)) {
console.log('元素进入视口');
}
});视口检测的高级用法
阈值设置
Intersection Observer支持设置触发阈值：
const observer = new IntersectionObserver(callback, {
threshold: [0, 0.25, 0.5, 0.75, 1] // 元素可见比例达到这些值时触发
});懒加载实现
结合视口检测实现图片懒加载：
const lazyImages = document.querySelectorAll('img.lazy');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));注意事项
- Intersection Observer不兼容IE，需要polyfill或回退方案
- 手动计算方式性能较差，适合简单场景
- 滚动事件需要节流(throttle)优化性能
- 移动端需要考虑视觉视口(visual viewport)与布局视口(layout viewport)差异
