[英]Using AOS (animate on scroll) inside a div with overflow
I'd really like some things to animate onto screen when I scroll down to them, as they do here... 当我向下滚动到它们时,我真的希望某些东西可以在屏幕上生成动画,就像它们在这里一样...
https://michalsnik.github.io/aos/ https://michalsnik.github.io/aos/
The problem is my site is actually nested inside a div called 'main-content' with seperate divs for the side bar and top bar. 问题是我的网站实际上嵌套在一个名为“ main-content”的div中,侧边栏和顶部栏分别有div。
It would appear from this question and answer that its not possible to achieve what I want inside a nested scroller, but this was 3 years ago and I'm just wondering if there is a potential workaround using aos or wow.js or something similar. 从这个问题和答案中可以看出,无法在嵌套滚动器中实现我想要的功能,但这是3年前的事情,我只是想知道是否存在使用aos或wow.js或类似方法的潜在解决方法。
I've tried a couple and had no luck but I feel like there must be a way to achieve this. 我试过几次,没有运气,但我觉得必须有一种方法来实现这一目标。
Thanks in advance! 提前致谢!
IntersectionObserver makes this kid of behavior easy to implement yourself using vanilla JavaScript. IntersectionObserver使这种行为举止易于使用原始JavaScript来实现。 It's a fairly new API but there's a polyfill . 这是一个相当新的API,但是有一个polyfill 。
If you wanted to track your own scroll container instead of the document you can set the root
to something else. 如果要跟踪自己的滚动容器而不是文档,可以将root
设置为其他名称。
// Find the item we want to animate on scroll var target = document.querySelector('#target'); var targetActiveClass = 'target-is-active'; // Call this function when it enters/leaves the viewport var callback = function(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add(targetActiveClass); } else { entry.target.classList.remove(targetActiveClass); } }); }; // Create our observer var observer = new IntersectionObserver(callback, {threshold: 0}); observer.observe(target);
/* Our target, hidden by default */ #target { align-items: center; background-color: #000; color: #fff; display: flex; justify-content: center; height: 100px; margin-bottom: 150vh; margin-top: 150vh; opacity: 0; transform: translateX(-100%); transition: opacity .25s ease-in-out, transform .25s ease-in-out; width: 200px; } /* Apply this class when #target enters/leaves the viewport */ #target.target-is-active { opacity: 1; transform: none; }
<p>Scroll!</p> <div id="target">Howdy!</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.