Search code examples
javascriptcssvue.jsscrollelement

How to handle scroll in specific element?

I'm using Element UI component in Vue.js and would like to add scroll management function to implement infinite scroll.

[This is a code of screenshot: Please take a look Example section] http://element.eleme.io/#/en-US/component/container

I tried the following code but infiniteScroll method was not called even if I scroll this section.

<el-main @scroll="infiniteScroll">......</el-main>

Also, I tried below as well, but it was not working because this page has two scrolls (in nav/content) and want to call infiniteScroll method when content is scrolled only.

created: function () {
  window.addEventListener('scroll', this.infiniteScroll);
},
destroyed: function () {
  window.removeEventListener('scroll', this.infiniteScroll);
}

Do you guys have the best solution?

enter image description here

Solution

  • <el-main @scroll="infiniteScroll">......</el-main> doesn't work because when binding an event on a component, Vue listens for custom events by default.

    If you want to listen for a native event you have to use the .native modifier:

    <el-main @scroll.native="infiniteScroll">......</el-main>

    Check demo