如何检测移动端通知栏下拉？Web游戏暂停实现方案咨询

针对移动端下拉通知栏时暂停Web游戏的需求，以下几种方案可以尝试：

1. 监听视口高度变化（resize事件） #

下拉通知抽屉会导致浏览器视口高度突然减小，通过监听window.resize事件，判断高度变化阈值来触发暂停逻辑：

let previousHeight = window.innerHeight;

window.addEventListener('resize', () => {
  const currentHeight = window.innerHeight;
  // 设定合理阈值，比如高度减少50px以上判定为下拉通知栏
  if (previousHeight - currentHeight > 50) {
    // 执行游戏暂停逻辑
    console.log('通知栏下拉，暂停游戏');
  }
  previousHeight = currentHeight;
});

注意：虚拟键盘弹出也会触发resize，可结合场景额外判断（如是否处于输入状态）避免误触发。

2. 监听window的blur/focus事件 #

之前给div绑定onBlur无效，是因为div焦点丢失不对应系统通知栏操作，直接监听window的blur事件，页面失焦时触发暂停：

window.addEventListener('blur', () => {
  // 页面失去焦点，暂停游戏
  console.log('页面失焦，暂停游戏');
});

window.addEventListener('focus', () => {
  // 页面重新聚焦，恢复游戏
  console.log('页面聚焦，恢复游戏');
});

该方案在多数移动端浏览器中，下拉通知栏时页面会失焦，能准确触发。

3. 带前缀的visibilitychange事件 #

部分移动端浏览器（如iOS Safari）需要使用webkit前缀的事件名，补充监听对应事件：

function handleVisibilityChange() {
  if (document.hidden || document.webkitHidden) {
    console.log('页面不可见，暂停游戏');
  } else {
    console.log('页面可见，恢复游戏');
  }
}

document.addEventListener('visibilitychange', handleVisibilityChange);
document.addEventListener('webkitvisibilitychange', handleVisibilityChange);

4. 监听scroll事件结合视口位置 #

部分设备下拉通知栏时，页面会出现负向滚动，可通过scroll事件判断：

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 滚动位置为负时判定为下拉通知栏
  if (scrollTop < 0) {
    console.log('下拉通知栏，暂停游戏');
  }
});

此方案兼容性稍差，建议作为补充方案使用。

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