js实现满屏效果

实现满屏效果的方法

在JavaScript中实现满屏效果通常涉及调整元素的尺寸或页面滚动行为。以下是几种常见的实现方式：

设置元素高度为100vh

通过CSS的vh单位可以让元素高度占满整个视口：

document.getElementById('fullscreen-element').style.height = '100vh';

对应的CSS更高效，推荐直接使用：

.fullscreen {
  height: 100vh;
  width: 100vw;
}

全屏API（浏览器原生支持）

使用requestFullscreen方法实现真正的全屏模式：

const element = document.documentElement; // 整个页面
element.requestFullscreen().catch(err => {
  console.error('全屏失败:', err);
});

退出全屏：

document.exitFullscreen();

注意： 此API需用户交互（如点击事件）触发，部分移动端浏览器可能不支持。

滚动到指定区域

通过scrollIntoView实现滚动到某个满屏区块：

document.querySelector('.section').scrollIntoView({
  behavior: 'smooth' // 平滑滚动
});

HTML结构示例：

<div class="section" style="height:100vh"></div>

监听窗口大小变化

动态调整元素尺寸以适应窗口：

window.addEventListener('resize', () => {
  const element = document.getElementById('responsive-element');
  element.style.height = `${window.innerHeight}px`;
});

初始设置：

window.dispatchEvent(new Event('resize'));

关键注意事项

• 移动端浏览器地址栏可能导致100vh实际高度超出视口，可用window.innerHeight替代。
• 全屏API在不同浏览器可能需要前缀（如webkitRequestFullscreen）。
• 滚动效果可配合CSS的scroll-snap-type实现分屏滚动：

  .container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
  }
  .section {
    scroll-snap-align: start;
  }

根据具体需求选择合适方案，CSS方案性能通常优于JavaScript动态计算。