I am currently working with Vue.js and utilizing Element UI components. I want to incorporate a scroll management function to achieve infinite scrolling.
To better understand, please refer to the screenshot in the Example section:
Despite trying different approaches, such as the code snippet below, the infiniteScroll method does not get triggered when scrolling this particular section:
<el-main @scroll="infiniteScroll">......</el-main>I also attempted another solution by using event listeners for the scroll events but encountered issues because there are multiple scrollable elements on the page (nav/content), and I only want the infiniteScroll method to be called when the content is scrolled:
created: function () {
window.addEventListener('scroll', this.infiniteScroll);
},
destroyed: function () {
window.removeEventListener('scroll', this.infiniteScroll);
}
Any suggestions or alternative solutions would be greatly appreciated!