我设置了一个非常简单的视差示例,但我注意到在滚动元素时没有发生对 window.scrollY
的更改(它始终为 0
)。就好像因为我们只是在一个透视图中移动,javascript 没有检测到任何滚动。
在 css viewport perspective 中滚动时如何检测滚动变化?
我的 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>
最佳答案
因为 overflow 属性是在 .parallax 上设置的,所以你会检查在那个而不是窗口上滚动:
$('.parallax').on("scroll", function(){
var scrollPosition = $(this).scrollTop();
});
关于javascript - 使用 css 透视图检测滚动行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31505103/