在element-plus 的 el-scrollbar中使用AOS.js的方法

最近写毕设想要在关于页面用aos.js的动画库，增加一个滚动动画效果，但是发现在elementplus的滚动条组件里面无法使用这个动画库，主要的原因一开始猜测是aos的滚动监听是针对原生滚动的，但是el-scrollbar的滚动事件是自己声明的。

不过当我看了aos的源码后我发现

  window.addEventListener('scroll', throttle(() => {

    handleScroll($aosElements, options.once);

  }, options.throttleDelay));

它使用handleScroll这个方法来处理scroll事件，而在这个方法中使用了pageYoffset这个属性来获取元素的滚动位置。

/**
 * Scroll logic - add or remove 'aos-animate' class on scroll
 *
 * @param  {array} $elements         array of elements nodes
 * @param  {bool} once               plugin option
 * @return {void}
 */
const handleScroll = function ($elements, once) {
  const scrollTop = window.pageYOffset;
  const windowHeight = window.innerHeight;
  /**
   * Check all registered elements positions
   * and animate them on scroll
   */
  $elements.forEach((el, i) => {
    setState(el, windowHeight + scrollTop, once);
  });
};

但是根据我的测试发现，el-scrollbar并不会修改这个属性，所以导致在aos看来，滚动从未发生过

但是当我以为可以在设置pageXOffset就可以让aos以为发生了滚动后我发现，虽然属性被修改但是动画还是没有被显示，我当时猜测有可能是因为AOS的属性并没有刷新，他可能还在保持mount时候的状态

然后我看了AOS的github的issue有没有人有相同的问题然后，在223这个issue上我看到https://github.com/michalsnik/aos/issues/223#issuecomment-420336772，这个叫Mario的人发现可以通过AOS全局的refresh方法，让AOS重新部署，这样就可以。

但是当我直接复制他们的思路后发现对于el-scrollbar来说还是做不到监听这个滚动效果（这里我都快放弃了）

不过后来我想到，el-scrollbar在滚动时只会改变scrollY的属性并不会改变pageYoffset的值，于是我又最后尝试了一次，把修改offset和refresh的方法结合起来终于做到了在el-scrollbar中实现AOS的滚动动画库。

import MainHeader from "../components/Home/header/MainHeader.vue";
import AOS from "aos"

export default {
  components: {
    MainHeader,
  },
  methods:{
  //在el-scrollbar的监听它自己的scroll事件调用这个方法（@scroll=“scrollProxy”）
    scrollProxy: function(scrollParams){
      window.pageYOffset = scrollParams.scrollTop;
      window.scrollY = scrollParams.scrollTop;
      AOS.refresh();
    }
  }
};