HTML滚动触发消息窗口失效问题排查与修复求助

原代码存在的问题 #

• 内联样式语法错误：height:20%,width:5% 中逗号应改为分号；box-shadow 的 rgba(100,100,100,50) 最后一个alpha参数超出0-1的有效范围，需改为0.5。
• DOM元素尺寸修改方式错误：直接赋值元素的width/height属性无效，需通过style.width/style.height修改内联样式。
• Firefox滚动事件逻辑颠倒：e.detail>0对应向下滚动，e.detail<0对应向上滚动，原代码判断逻辑完全相反，导致Firefox中行为异常。
• 冗余空函数：<body onscroll="scroll()">定义了无实际作用的空函数，还可能引发命名冲突。

修复后的完整代码 #

<html>
  <body>
    <div
      id="message"
      style="position:fixed;left:0%;top:30%;height:0;width:0;border-radius:10px;background-image:linear-gradient(90deg,rgba(100,255,200,0.5),rgba(100,255,255,0.5),rgba(100,255,200,0.5));box-shadow: 10px 10px 10px 5px rgba(100,100,100,0.5);transition: all 0.3s ease;"
    >
      <p>
        testmessage：
      </p>
    </div>

    <script>
      var scrollFunc = function (e) {
        e = e || window.event;
        const messageEl = document.getElementById("message");
        if (e.wheelDelta) {
          // IE、Chrome滑轮事件
          if (e.wheelDelta > 0) {
            // 滑轮向上滚动：隐藏窗口
            messageEl.style.width = "0";
            messageEl.style.height = "0";
          } else {
            // 滑轮向下滚动：显示窗口
            messageEl.style.width = "20%";
            messageEl.style.height = "5%";
          }
        } else if (e.detail) {
          // Firefox滑轮事件
          if (e.detail > 0) {
            // 滑轮向下滚动：显示窗口
            messageEl.style.width = "20%";
            messageEl.style.height = "5%";
          } else {
            // 滑轮向上滚动：隐藏窗口
            messageEl.style.width = "0";
            messageEl.style.height = "0";
          }
        }
      };

      // 绑定滑轮滚动事件
      if (document.addEventListener) {
        document.addEventListener("DOMMouseScroll", scrollFunc, false);
      }
      window.onmousewheel = document.onmousewheel = scrollFunc;
    </script>
  </body>
</html>

额外优化说明 #

• 添加transition: all 0.3s ease样式，让窗口显示/隐藏时有平滑过渡效果，提升体验。
• 初始状态设为height:0;width:0，符合"向下滚动才显示"的预期逻辑。
• 缓存messageEl元素，避免每次滚动重复调用getElementById，提升性能。

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