Javascript 在滚动部分的末尾添加动画

我制作了一个网页。共有三个部分，分别是

#侧栏

、

#后栏

和

#内容

，它们都有自己的滚动条。我想添加一个动画，让用户知道他们到达了一节的末尾

---

我可能用错误的关键字搜索，但大多数信息要么是关于动画的，比如使用AOS或jQuery解决方案之类的库滚动到顶部或底部。是否有任何本地方法可以仅使用javascript或简单的css库来添加此类动画

您应该尝试使用服务器：）它现在得到了很好的支持

const mySections = document.querySelectorAll('.section');

observer = new IntersectionObserver(entries => {
 entries.forEach(entry => {
   if (entry.intersectionRatio > 0) {
     console.log('in the view');
   }  else {
     console.log('out of view. FIRE EVENT!');
   }
 });
});

mySections.forEach(image => {
  observer.observe(image);
});

---

您可以将滚动位置与偏移高度进行比较

var sidebar=document.getElementById（'sidebar'）；
侧边栏.addEventListener（'scroll'，函数（e）{
如果（e.target.scrollTop>=（e.target.scrollHeight-e.target.offsetHeight））
{
if（this.classList.contains（'animate'））{
document.querySelector（“#侧边栏li:last child”）.classList.remove（'animate'）；
}
document.querySelector（“#侧边栏li:last child”）.classList.add（'animate'）；
}
});
。制作动画{
颜色：#ffffff；
-webkit掩模图像：线性梯度（-75度，rgba（0,0,0,6）30%，#000 50%，rgba（0,0,0,6）70%）；
-webkit面罩尺寸：200%；
动画：无限发光；
}
@-webkit关键帧发光{
从{
-webkit面罩位置：150%；
}
到{
-webkit面罩位置：-50%；
}
}

引导边栏
console.log（'default'）
document.addEventListener（'DOMContentLoaded'，函数（）{
window.addEventListener（'scroll'，函数（e）{
console.log（window.scrollY）；
console.log（如target）；
如果（e.target.tagName=='ul'）{
if（e.target.scrollTop==（e.target.scrollHeight-e.target.offsetHeight））
{
警报（“完成”）；
}
}
});
var postlist=document.getElementsByClassName（“postlist”）；
var showPost=函数（）{
console.log（'CLICKED'）
var ps=''；/{{postSource | safe}}；
var idOfPost=this.id；
var iframe=document.getElementById（“serviceFrameSend”）
setAttribute（“src”，ps[idOfPost]）
};
对于（变量i=0；ia，
a[aria expanded=“true”]{
颜色：#fff；
背景：#6d7fcc；
}
#postbar ul li a：悬停{
颜色：#7386D5；
背景：#fff；
}
a[data toggle=“colla