JavaScript滚动触发图片隐藏时过渡效果失效的解决请求

核心问题分析 #

你的代码过渡失效主要有三个原因：

• 过渡属性在scroll事件中动态添加，事件触发频繁会导致过渡来不及生效；
• max-width: inherit不是明确的数值，浏览器无法计算过渡动画的起始/结束值；
• 缺少必要的溢出控制和盒模型设置，导致过渡效果无法正常展示。

修正后的实现方案 #

1. 静态CSS定义基础样式与过渡

先给目标元素添加静态样式，确保过渡属性始终存在：

#logoimg-hidden {
  max-width: 100%; /* 替换为你需要的初始宽度，比如200px */
  transition: max-width 0.4s linear;
  overflow: hidden;
  box-sizing: border-box;
}

2. 简化JavaScript逻辑

只在滚动时修改max-width，无需重复设置过渡属性：

function runOnScroll() {
  const logoImg = document.getElementById("logoimg-hidden");
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  
  logoImg.style.maxWidth = scrollTop > 20 ? "0" : "100%";
}; 

window.addEventListener("scroll", runOnScroll);

3. 可选：优化scroll事件性能

由于scroll事件触发频率极高，可添加节流函数减少不必要的计算：

function throttle(func, delay = 50) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

// 绑定节流后的滚动事件
window.addEventListener("scroll", throttle(runOnScroll));

关键修改说明 #

• 提前定义过渡属性：将transition放在CSS中，确保元素从渲染开始就具备过渡能力，避免动态添加时的时序问题；
• 使用明确的宽度值：用100%或具体像素值替代inherit，让浏览器能清晰计算过渡动画的起止状态；
• 溢出控制：overflow: hidden保证图片宽度缩小时，超出部分被隐藏，不会破坏过渡视觉效果；
• 盒模型优化：box-sizing: border-box确保元素宽度计算包含内边距和边框，防止过渡时出现布局跳动。

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