Question

我正在尝试使用每个部分（淡入，淡出等）中出现的动画来构建基于滚动快照的网站。

对于动画，我正在使用AOS库（https://michalsnik.github.io/aos/）

滚动捕捉通过像这样的css属性实现-
父母-

.scroll-container{
scroll-snap-type:y mandatory;
overflow-y: scroll;
height: 100vh;
scroll-padding: 8vh;
}

儿童-

scroll-item{
scroll-snap-align: start;
}

如果我这样实现：

 <body>
<div class="scroll-conatiner">
    <section class="scroll-item"> 
    </section>
    <section class="scroll-item">       
    </section>
</div>
<body>

然后，滚动捕捉效果很好，但是，我的理解是，这消除了动画js侦听的窗口滚动，因为滚动是div内部的，而不是页面的内部。
但是，如果我这样对身体实施：

<body class="scroll-conatiner">  
  <section class="scroll-item">
  </section>
  <section class="scroll-item">    
  </section>
</body>

然后动画可以工作，但滚动捕捉不起作用。
我检查了帖子的数量，却找不到我的问题。
Scroll Snap Css说它不受广泛支持，但现在在大多数主流浏览器中都得到支持。
其他人使用js，css属性出现问题时，我试图避免这种情况-Scroll Snapping to Page Section
在看完这篇css-scroll-snapping-vertical-not-working帖子之后，我终于设法使它在体内起作用了，但是动画仍然没有效果。

其他链接-css-tricks1 css-tricks2 css-tricks3

如何使滚动捕捉和基于滚动的动画协同工作？

0 个答案: