vue3 wowjs 滚动失效 scroll 超出首页不显示动画 element plus

1、下载 https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js 保存到自己的地址

2、在html文件导入 <script src="/static/wow.js"></script>

3、初始化

var wow = new WOW({

boxClass: 'wow', // animated element css class (default is wow)

animateClass: 'animated', // animation css class (default is animated)

offset: 0, // distance to the element when triggering the animation (default is 0)

mobile: true, // trigger animations on mobile devices (default is true)

live: true, // act on asynchronously loaded content (default is true)

callback: function (box) {

// the callback is fired every time an animation is started

// the argument that is passed in is the DOM node being animated

},

scrollContainer: null // optional scroll container selector, otherwise use window

});

wow.init();

4、修改其中一行 viewTop = document.getElementsByClassName('el-main')[0].scrollTop 自己滚动条的class 或者 id 获取scrollTop 就可以了

WOW.prototype.isVisible = function(box) {

var bottom, offset, top, viewBottom, viewTop;

offset = box.getAttribute('data-wow-offset') || this.config.offset;

viewTop = (this.config.scrollContainer && this.config.scrollContainer.scrollTop) || window.pageYOffset||document.body.scrollTop||document.getElementsByClassName('el-main')[0].scrollTop;

// console.log(viewTop,'看一下');

viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;

top = this.offsetTop(box);

bottom = top + box.clientHeight;

return top <= viewBottom && bottom >= viewTop;

};