AOS淡入应该在滚动上工作,但是设置溢出-x和y干扰效果。滚动时没有发生任何事情,只有当我调整窗口大小时才会淡出。我正在使用这个库:AOS library
main {
height: 120vh;
perspective: 2px;
overflow-x: hidden;
overflow-y: auto;
}
section {
transform-style: preserve-3d;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: -1;
}
.no-parallax {
height: auto;
background-color: #000000;
}
.no-parallax_footer {
z-index: 999;
width: 100%;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: 8;
}
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-quad',
});
</script>
有人知道如何解决这个问题吗?
我在这里发现了同样的问题,但是在我的电脑上不起作用。
解决方案是添加:<script>document.body.querySelector('main').addEventListener('scroll', AOS.refresh);</script>