我想在 HTML 中留言 window 但 javascript 不起作用

Question

I made a message window that will show a message when the user slide down the website and hide the message when the user slides up.我做了一个消息 window 当用户向下滑动网站时会显示一条消息，当用户向上滑动时隐藏消息。 I referenced this tutorial but it did not work as intended.我参考了本教程，但它没有按预期工作。

This is my code:这是我的代码：

<html>
  <body onscroll="scroll()">
    <div
      id="message"
      style="position:fixed;left:0%;top:30%;height:20%,width:5%;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,50);"
    >
      <p>
        testmessage：
      </p>
    </div>

    <script language="javascript">
      function scroll() {
        //console.log("打印log日志");实时看下效果
        //console.log("开始滚动！");
      }

      var scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {
          //第一步：先判断浏览器IE，谷歌滑轮事件
          if (e.wheelDelta > 0) {
            //当滑轮向上滚动时
            //console.log("滑轮向上滚动");
            document.getElementById("message").width = 0;
            document.getElementById("message").height = 0;
          }

          if (e.wheelDelta < 0) {
            //当滑轮向下滚动时
            //console.log("滑轮向下滚动");
            document.getElementById("message").width = 20%;
            document.getElementById("message").height = 5%;
          }
        } else if (e.detail) {
          //Firefox滑轮事件
          if (e.detail > 0) {
            //当滑轮向上滚动时
            //console.log("滑轮向上滚动");
            document.getElementById("message").width = 0;
            document.getElementById("message").height = 0;
          }
          if (e.detail < 0) {
            //当滑轮向下滚动时
            //console.log("滑轮向下滚动");
            document.getElementById("message").width = 20%;
            document.getElementById("message").height = 5%;
          }
        }
      };
      //给页面绑定滑轮滚动事件
      if (document.addEventListener) {
        //firefox
        document.addEventListener("DOMMouseScroll", scrollFunc, false);
      }
      //滚动滑轮触发scrollFunc方法 //ie 谷歌
      window.onmousewheel = document.onmousewheel = scrollFunc;
    </script>
  </body>
</html>

I wonder what's wrong with my code and how could I fix it.我想知道我的代码有什么问题，我该如何解决。
Thank you.谢谢你。

Answer 1

You need to invoke your scrollFunc()你需要调用你的scrollFunc()

Add some height, so that it is scrollable.添加一些高度，以便它可以滚动。

    <body onscroll="scrollFunc()" style="height: 5000px;">

我想在 HTML 中留言 window 但 javascript 不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-12-12 05:34:31

我想在 HTML 中留言 window 但 javascript 不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-12-12 05:34:31

解决方案1
1 已采纳 2022-12-12 05:34:31