0
bodyタグを使用して視差効果を実装しようとすると、onscrollイベントが表示されません。以下の私のコードを見てください。bodyタグで視差を実装するとwindow.onscrollが機能しなくなる
私はhtml、parallax、parallax-frontとparallax-back（視差作業を行い、すなわち、すべてのCSS）に対応した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>
これは答えになっていますか？私の作品の例は見えないのですか？ – rityzmon