适配不同屏幕宽度的头部滚动缩放功能问题排查与优化

一、修复屏幕宽度检测函数的问题 #

原代码存在两个核心错误：

1. 使用window.screen.width获取的是屏幕物理分辨率宽度，而非浏览器当前视口宽度，应改用window.innerWidth。
2. 尝试给数值类型的变量调用addListener，这是无效操作，正确做法是监听window的resize事件。

修复后的检测代码：

function handleWindowWidth() {
  const viewportWidth = window.innerWidth;
  if (viewportWidth > 1300) { 
    console.log("视口宽度大于1300px");
    enableScrollZoom('large');
  } else if (viewportWidth > 700 && viewportWidth <= 1300) {
    console.log("视口宽度在700px-1300px之间");
    enableScrollZoom('medium');
  } else {
    console.log("视口宽度小于等于700px");
    enableScrollZoom('small');
  }
}

// 初始化执行一次
handleWindowWidth();
// 监听窗口大小变化
window.addEventListener('resize', handleWindowWidth);

二、滚动缩放逻辑的优化 #

直接操作DOM样式会导致代码冗余且难以维护，建议用CSS类切换实现，同时添加防抖避免滚动事件频繁触发：

1. 定义CSS类（推荐） #

/* 默认未滚动状态 */
.header-section {
  font-size: 2em;
  width: 50%;
  transition: all 0.3s ease; /* 添加过渡动画提升流畅度 */
}

/* 滚动后的状态 */
.header-section.scrolled {
  font-size: 1em;
  width: 25%;
}

/* 小屏幕下调整样式（可禁用缩放） */
@media (max-width: 700px) {
  .header-section {
    font-size: 1.2em;
    width: 100%;
  }
  .header-section.scrolled {
    font-size: 1em;
    width: 100%;
  }
}

2. 优化后的JavaScript逻辑 #

// 提前获取DOM元素，避免重复查询
const headerLeft = document.getElementById('headerleft');
const headerRight = document.getElementById('headerright');
let scrollTimeout;

// 根据屏幕尺寸配置滚动缩放
function enableScrollZoom(size) {
  // 先移除之前的滚动监听
  window.removeEventListener('scroll', handleScroll);
  
  if (size === 'small') {
    // 小屏幕下移除缩放类，禁用滚动缩放
    headerLeft.classList.remove('scrolled');
    headerRight.classList.remove('scrolled');
    return;
  }
  
  // 中/大屏幕绑定滚动监听
  window.addEventListener('scroll', handleScroll);
}

// 防抖处理的滚动函数
function handleScroll() {
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    const isScrolled = document.body.scrollTop > 50 || document.documentElement.scrollTop > 50;
    headerLeft.classList.toggle('scrolled', isScrolled);
    headerRight.classList.toggle('scrolled', isScrolled);
  }, 50); // 50ms防抖，平衡流畅度与性能
}

三、整体逻辑说明 #

1. 页面初始化时检测当前视口宽度，绑定对应尺寸的滚动缩放逻辑。
2. 窗口大小变化时，重新判断视口宽度，更新滚动缩放配置。
3. 用CSS类控制样式，配合过渡动画提升体验，同时让代码更易维护。
4. 滚动事件添加防抖，减少不必要的DOM操作，优化性能。

内容的提问来源于stack exchange，提问作者er-sc