如何用JavaScript matchMedia检测视口变化并适配滚动阈值？

核心问题分析 #

你的代码存在两个关键问题：

• scroll事件的回调参数vwChange覆盖了全局定义的媒体查询对象，导致无法正确识别当前视口状态
• 未监听视口变化事件，也没有根据当前视口动态切换滚动判断阈值

修正后的JS代码 #

// 定义桌面端与移动端的滚动阈值
const DESKTOP_THRESHOLD = 3296;
const MOBILE_THRESHOLD = 42;

// 定义移动端视口的媒体查询规则
const mobileQuery = window.matchMedia("(min-width: 360px) and (max-width: 765px)");

// 获取目标元素
const footerEl = document.querySelector(".footer_bottom_content");

// 滚动状态处理逻辑
function handleScroll() {
  // 根据当前视口匹配情况选择对应阈值
  const threshold = mobileQuery.matches ? MOBILE_THRESHOLD : DESKTOP_THRESHOLD;
  
  if (window.scrollY < threshold) {
    footerEl.classList.add("scrolledz");
  } else {
    footerEl.classList.remove("scrolledz");
  }
}

// 页面初始化时执行一次，确保初始状态正确
handleScroll();

// 监听滚动事件
document.addEventListener("scroll", handleScroll);

// 监听视口变化，切换阈值后重新计算滚动状态
mobileQuery.addEventListener("change", handleScroll);

额外优化建议 #

• 你的CSS中.footer_bottom_content的top: 812px在移动端可能导致元素超出屏幕，建议通过媒体查询调整移动端的定位：

@media (min-width: 360px) and (max-width: 765px) {
  .footer_bottom_content {
    top: auto;
    bottom: 0; /* 移动端固定在底部更符合交互习惯 */
  }
}

• 可给滚动事件添加防抖处理，减少频繁触发的性能消耗（可选）：

let debounceTimer;
function handleScroll() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const threshold = mobileQuery.matches ? MOBILE_THRESHOLD : DESKTOP_THRESHOLD;
    if (window.scrollY < threshold) {
      footerEl.classList.add("scrolledz");
    } else {
      footerEl.classList.remove("scrolledz");
    }
  }, 100);
}

内容的提问来源于stack exchange，提问作者Kiki-ko