AOS渐入淡出不工作视差滚动



AOS淡入应该在滚动上工作,但是设置溢出-xy干扰效果。滚动时没有发生任何事情,只有当我调整窗口大小时才会淡出。我正在使用这个库: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>

相关内容

  • 没有找到相关文章

最新更新