我设置了一个非常简单的视差示例,但注意到在滚动我的元素时不会发生对window.scrollY
的更改(始终为0
)。好像是因为我们只是在透视图中移动,所以javascript不会检测到任何滚动。
在CSS视口透视图中滚动时如何检测滚动变化?
我的css设置如下:
* {
margin:0;
padding:0;
}
body {
}
.parallax {
overflow-x:hidden;
overflow-y:auto;
perspective:1px;
height:200vh;
}
.back {
background-color:#fff;
height:100vh;
transform:translateZ(-1px) scale(2);
}
.base {
transform:translateZ(0);
background-color:#fff;
}
.parallax__layer {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
display:block;
}
.title {
text-align:center;
position:absolute;
left:50%;
top:50%;
color:blue;
transform:translate(-50%, -50%);
display:block;
}
我的dom内容是:
<div class="parallax">
<div class="parallax__layer back">
<div class="title">test</div>
</div>
<div class="parallax__layer">
<div class="title">image</div>
<div class="frame">
test frame
</div>
</div>
</div>
由于在.parallax上设置了overflow属性,您将检查滚动而不是窗口滚动。
$('.parallax').on("scroll", function(){
var scrollPosition = $(this).scrollTop();
});
这里的关键是检测视差元素内的滚动-在单个帧格内。
所以您可能会做类似的事情:
const handleScrolling () => if (window.scrollY || window.pageYOffset < totalheight) requestAnimate()
$('.parallax').on('scroll', handleScrolling);