个人中心
gpt4 book ai didi

javascript - window.onscroll 在使用 body 标签实现视差时不再有效

转载 作者：行者123 更新时间：2023-11-28 05:26:21 25 4
gpt4 key购买 nike

当我尝试使用 body 标签实现视差效果时，我无法获取 onscroll 事件。请参阅下面的代码。

当我注释掉 CSS 中与 html、parallax、parallax-front 和 parallax-back< 对应的部分时(即所有使视差工作的 CSS)，onscroll 事件工作正常。一旦我取消注释它们，它就会停止工作。我还尝试了 document.onscroll、document.body.onscroll，这些也不起作用。

为什么它不起作用？如何让 onscroll 事件起作用？

function log(msg) {
  console.log(new Date() + ": " + msg);
}

window.onload = function() {
  log("loaded");
};

window.onscroll = function() {
  log(document.body.scrollTop);
};
html {
  overflow: hidden;
}

.parallax {
  margin: 0 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  perspective: 1px;
  perspective-origin: 0 0;

  overflow-x: hidden;
  overflow-y: auto;
}

.parallax-front {
  transform: translateZ(0px);
}

.parallax-back {
  transform-origin: 0 0;
  transform: translateZ(-2px) scale(3);
}

#banner {
  height: 10rem;
  line-height: 10rem;
  background: pink;
  border: 8px solid red;
  text-align: center;
}

#content {
  height: 50rem;
  background: rgba(224, 224, 255, 0.9);
  border: 8px solid blue;
  text-align: center;
}
  <body class="parallax">
    <div class="parallax-back">
      <div id="banner">Banner</div>
    </div>
    <div class="parallax-front">
      <div id="content">Content</div>
    </div>
  </body>

最佳答案

当你将 overflow: hidden 应用到 html 时，你不应该能够在任何地方滚动。

关于javascript - window.onscroll 在使用 body 标签实现视差时不再有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38754745/

25 4 0
文章推荐： c++ - 没有运算符匹配 ||这些操作数
文章推荐： javascript - 将倒计时到期时间从文本更改为重定向
文章推荐： 对象空数组上的 JavaScript 推送列表
文章推荐： javascript - ionic 服务 : Displays code only for a split second