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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！