js实现视口
视口检测与操作实现方法
获取视口尺寸
使用window.innerWidth和window.innerHeight获取当前视口尺寸：
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;监听视口变化
通过resize事件监听视口尺寸变化：
window.addEventListener('resize', () => {
console.log(`新视口尺寸: ${window.innerWidth}x${window.innerHeight}`);
});元素是否在视口中
使用Intersection Observer API检测元素是否进入视口：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('元素进入视口');
}
});
});
observer.observe(document.querySelector('.target-element'));滚动到视口位置
使用scrollIntoView方法将元素滚动到视口中：
document.getElementById('element').scrollIntoView({
behavior: 'smooth',
block: 'center'
});视口相对位置计算
获取元素相对于视口的位置：
const element = document.querySelector('.target');
const rect = element.getBoundingClientRect();
console.log({
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left
});移动端视口控制
在HTML的<meta>标签中设置视口属性：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">禁止视口缩放
通过事件监听阻止手势缩放：
document.addEventListener('gesturestart', (e) => {
e.preventDefault();
});视口单位使用
CSS中使用视口单位进行响应式布局：
.element {
width: 100vw;
height: 100vh;
font-size: 4vw;
}
