如何实现上滑触发element.requestFullscreen()？

直接在滚动事件中调用requestFullscreen()不可行——浏览器出于安全和用户体验限制，全屏API的调用必须由明确的用户交互手势触发（比如点击、触摸tap、键盘按键），滚动/滚轮事件不在浏览器认可的"用户主动触发手势"列表中，强行调用会抛出NotAllowedError。

可行方案一：绑定合法用户手势触发全屏 #

可以把全屏请求绑定到与滚动关联的明确交互事件上，比如触摸滑动结束（touchend）或首次滚轮触发时，同时判断滑动/滚动方向是否符合需求：

针对移动端触摸上滑场景：

let hasTriggeredFullscreen = false;
const overlay = document.querySelector('.fullscreen-overlay');

// 监听触摸滑动，判断上滑方向
overlay.addEventListener('touchmove', (e) => {
  const touch = e.touches[0];
  // 当触摸点滑到视口中下区域，标记为准备触发
  if (touch.clientY < window.innerHeight * 0.6 && !hasTriggeredFullscreen) {
    e.preventDefault(); // 阻止默认滚动行为，避免干扰
    overlay.dataset.isSwipeUp = 'true';
  }
});

// 在触摸结束时触发全屏请求
overlay.addEventListener('touchend', async () => {
  if (overlay.dataset.isSwipeUp === 'true' && !hasTriggeredFullscreen) {
    try {
      // 先隐藏引导层
      overlay.style.display = 'none';
      // 请求全屏（document.documentElement代表整个页面）
      await document.documentElement.requestFullscreen();
      hasTriggeredFullscreen = true;
    } catch (err) {
      console.error('全屏请求失败:', err);
      // 请求失败时的降级处理：仅隐藏引导层
      overlay.style.display = 'none';
    }
    delete overlay.dataset.isSwipeUp;
  }
});

针对PC端鼠标滚轮向下场景：

let scrollTriggered = false;
const overlay = document.querySelector('.fullscreen-overlay');

// 监听滚轮事件，仅触发一次
window.addEventListener('wheel', async (e) => {
  // 向下滚动（deltaY为正）且未触发过全屏
  if (e.deltaY > 20 && !scrollTriggered && !document.fullscreenElement) {
    scrollTriggered = true;
    e.preventDefault(); // 必须设置passive:false才能生效（见下方选项）
    overlay.style.display = 'none';
    try {
      await document.documentElement.requestFullscreen();
    } catch (err) {
      console.error('全屏请求失败:', err);
    }
  }
}, { passive: false }); // 这里必须设置passive:false，否则无法阻止默认滚动

方案二：模拟全屏视觉效果（降级方案） #

如果全屏API请求失败（比如浏览器不支持、用户拒绝权限），可以通过CSS实现视觉上的全屏效果，虽然不是真正的浏览器全屏，但能达到类似的体验：

CSS 代码：

/* 先在head添加viewport适配meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
*/

/* 模拟全屏的类 */
.simulate-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.simulate-fullscreen body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* 适配移动端安全区域 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

JS 触发代码：

function enableSimulatedFullscreen() {
  document.documentElement.classList.add('simulate-fullscreen');
}

// 在全屏请求失败的catch块中调用
catch (err) {
  console.error('全屏请求失败，启用模拟全屏:', err);
  enableSimulatedFullscreen();
}

注意事项 #

1. HTTPS 要求：大部分现代浏览器仅允许在HTTPS环境下使用Fullscreen API，本地开发的localhost除外。
2. 权限提示：部分浏览器会在首次请求全屏时弹出权限提示，用户拒绝后后续请求会直接失败。
3. 性能优化：滚动/触摸事件触发频繁，建议添加节流函数（比如手动实现或使用工具库）减少事件触发次数，避免性能问题。

内容的提问来源于stack exchange，提问作者normelsss