Question

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

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

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

＆＃13;

function log(msg) {
  console.log(new Date() + ": " + msg);
}

window.onload = function() {
  log("loaded");
};

window.onscroll = function() {
  log(document.body.scrollTop);
};

＆＃13;

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;
}

＆＃13;

  <body class="parallax">
    <div class="parallax-back">
      <div id="banner">Banner</div>
    </div>
    <div class="parallax-front">
      <div id="content">Content</div>
    </div>
  </body>

＆＃13;

Answer 1

当你Sum申请qty_applied时，你不应该在任何地方滚动。

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

1 个答案: