How to handle scroll in specific element?

Question

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?

@Muhammad Osama -Thank you for letting me know. I have changed the URL. — Tomomi
– Tomomi, Commented Aug 28, 2018 at 8:16
You have the right idea in your second attempt. but you are binding the event listener to the wrong element. Add a ref attribute to your main el-main element, find the content and bind the scroll event listener to that element instead — Chinonso Chukwuogor
– Chinonso Chukwuogor, Commented Aug 28, 2018 at 8:31
@Chinonso Chukwuogor Thank you for your comment. I tried your solution but had the following error: "TypeError: this.$refs.myInfiniteScroll.addEventListener is not a function" I changed it to id from ref as Nomis's suggest, then it worked. — Tomomi
– Tomomi, Commented Aug 28, 2018 at 8:56

tony19 · Accepted Answer · 2022-07-15 20:16:22Z

12

<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

edited Jul 15, 2022 at 20:16

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 28, 2018 at 8:58

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomomi Over a year ago

-Thank you very much. your answer is the simplest one! This is really good to know!

Nomis · Accepted Answer · 2018-08-28 08:53:46Z

1

As stated by Chinonso Chukwuogor in the comments, you should attach the listener to the scrolling element you want. Something like that should work :

<el-main id="myInfiniteScroll">......</el-main>

document.getElementById('myInfiniteScroll').addEventListener('scroll', this.infiniteScroll);

If it doesn't, it's more a matter of what is the infiniteScroll method.

edited Aug 28, 2018 at 8:53

answered Aug 28, 2018 at 8:38

Nomis

9047 silver badges12 bronze badges

1 Comment

Tomomi Over a year ago

Thank you very much. I tried to use ref but had a following error "TypeError: this.$refs.myInfiniteScroll.addEventListener is not a function" I changed it to id that you suggested to me, then it 's working! Thank you again!

Collectives™ on Stack Overflow

How to handle scroll in specific element?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related