滚动页面的时候，设置aos动画的dom无效。When scrolling the page, the dom for setting aos animation is invalid

[webqd]

This is: Bug

• Bug
• Feature request
• Question
• Idea

Specifications

• AOS version: 3.0.0-beta.6
• OS: window11
• Browser: google108

Expected Behavior

• 滚动页面的时候，设置aos动画的dom可以正常展示。
• When scrolling the page, the dom with aos animation can display normally。

Actual Behavior

• 在页面div元素中设置高度，比如div {height：500px; overflow-y: auto;},此时内容很多，可以滚动，但是滚动之后的页面元素不展示。但是如果是浏览器自带滚动则是正常工作。
• Set the height in the page div element, such as div {height: 500px; overflow y: auto;}, At this time, there is a lot of content that can be scrolled, but the page elements after scrolling are not displayed.However, if the browser comes with scrolling, it works normally

Steps to Reproduce the Problem

       
1
2
3
 
4
5
6
  

2. .ul {
   height: 500px;
   overflow-y: auto
   li {
   height: 100px
   }
   }
   

Detailed Description

Possible Solution

浏览器 自动出现滚动条的时候 是可以正常工作的，但是如果一个父元素设置了高度，就不正常， 是因为aos 监听滚动的时候使用了
document.addEventListener(options.startEvent, function() {
refresh(true);
});
window.addEventListener('load', function() {
refresh(true);
});
。

The browser can work normally when the scrollbar automatically appears. However, if a parent element is set to a height, it is not normal. This is because aos monitors scrolling

document.addEventListener(options.startEvent, function() {
refresh(true);
});
window.addEventListener('load', function() {
refresh(true);
});
。

可以接受参数变成 :
It is acceptable to change the parameter to:
document.getElementById(id).addEventListener(options.startEvent, function() {
refresh(true);
});

[webqd]

上面的 dom 结构：

       
1
2
3
 
4
5
6