我做了this网页。有3个部分#sidebar#postbar#content,它们具有各自的滚动条。我想添加一个动画,让用户知道他们已经到达了本节的结尾。

我可能使用错误的关键字进行搜索,但是大多数信息要么是关于动画滚动的事情,要么是使用诸如AOS或jQuery解决方案之类的库跳到顶部或底部。是否有任何原生方法可以仅使用javascript或简单的CSS库添加此类动画?

最佳答案

您应该尝试Intersection Observer :)现在已经很好地支持了。

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);
});

关于javascript - 在滚动部分的末尾添加动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58646170/

10-12 12:51
查看更多