是否存在可检测浏览器窗口高度变化的DOM事件监听器？

你可以通过封装原生resize事件 + 自定义事件的方式实现需求，只在窗口高度发生变更时触发回调，实现步骤如下：

实现代码 #

首先在全局执行以下封装代码，注册自定义的onHeightResizeOnly事件：

// 存储上一次窗口高度的初始值
let lastWindowHeight = window.innerHeight;

// 防抖函数：可根据需求调整延迟时间，不需要防抖可以直接移除这部分逻辑
const debounce = (handler, wait = 150) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => handler.apply(this, args), wait);
  };
};

// 监听原生resize事件，判断高度变更后触发自定义事件
window.addEventListener('resize', debounce(() => {
  const currentHeight = window.innerHeight;
  // 仅当高度发生变化时触发自定义事件
  if (currentHeight !== lastWindowHeight) {
    lastWindowHeight = currentHeight;
    window.dispatchEvent(new CustomEvent('onHeightResizeOnly', {
      detail: {
        height: currentHeight
      }
    }));
  }
}));

使用方式 #

封装完成后就可以用你期望的方式监听高度变化了：

window.addEventListener("onHeightResizeOnly", () => {
  console.log(window.innerHeight);
});

// 也可以直接从事件参数中拿到当前高度
window.addEventListener("onHeightResizeOnly", (e) => {
  console.log('当前窗口高度：', e.detail.height);
});

注意事项 #

• 不需要防抖效果的话，直接去掉debounce包装即可，resize事件触发时会实时判断高度变化
• 该自定义事件的触发逻辑和原生resize一致，移动端浏览器地址栏收起展开、PC端窗口拖拽改高度等场景都会正常触发
• 如需兼容IE等不支持CustomEvent的老旧浏览器，可以添加CustomEvent polyfill适配

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