InfiniteScroll: fix avoid event trigger when element invisible

[qingdengyue]

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow Element's contributing guide (中文 | English | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer relative issues for you PR.

[qingdengyue]

#16673

[element-bot]

Deploy preview for element ready!

Built with commit 9552815

https://deploy-preview-16681--element.netlify.com

[a631807682]

scroll event does not trigger after component visible.
When contents don't fill the container at first, InfiniteScroll can not do anything.
I think when component hidden, it should create a observer to watch it if visible, and then emit 'scroll' event to compute should trigger callback or not.

[qingdengyue]

scroll event does not trigger after component visible.
When contents don't fill the container at first, InfiniteScroll can not do anything.
I think when component hidden, it should create a observer to watch it if visible, and then emit 'scroll' event to compute should trigger callback or not.

yeah. when the element is invisible,may be its parent element or self invisible. now when trigger scroll event,it will check the element visible status,if true ,go on ,if false,just return. the scroll event like a observer.

[a631807682]

scroll event does not trigger after component visible.
When contents don't fill the container at first, InfiniteScroll can not do anything.
I think when component hidden, it should create a observer to watch it if visible, and then emit 'scroll' event to compute should trigger callback or not.

yeah. when the element is invisible,may be its parent element or self invisible. now when trigger scroll event,it will check the element visible status,if true ,go on ,if false,just return. the scroll event like a observer.

yeah, but the problem is no scroll at first.
when component invisible, load will not trigger, and count equal 0. and then component visible, but count still equal 0, there are no scroll and we have no way to trgger it. unless dispatch event
like this this.$refs.table.$el.dispatchEvent(new CustomEvent('scroll')).

template

...
<ul v-infinite-scroll="load" style="height: 300px;overflow: auto;">
     <li v-for="i in count" style="display: flex;height: 50px;">{{ i }}</li>
</ul>
...

js

...
data() {
  return {
    count: 0
  }
}
...

[qingdengyue]

scroll event does not trigger after component visible.
When contents don't fill the container at first, InfiniteScroll can not do anything.
I think when component hidden, it should create a observer to watch it if visible, and then emit 'scroll' event to compute should trigger callback or not.

yeah. when the element is invisible,may be its parent element or self invisible. now when trigger scroll event,it will check the element visible status,if true ,go on ,if false,just return. the scroll event like a observer.

yeah, but the problem is no scroll at first.
when component invisible, load will not trigger, and count equal 0. and then component visible, but count still equal 0, there are no scroll and we have no way to trgger it. unless dispatch event
like this this.$refs.table.$el.dispatchEvent(new CustomEvent('scroll')).

template

...
<ul v-infinite-scroll="load" style="height: 300px;overflow: auto;">
     <li v-for="i in count" style="display: flex;height: 50px;">{{ i }}</li>
</ul>
...

js

...
data() {
  return {
    count: 0
  }
}
...

v-infinite-scroll directive will bind the container's scroll event on inserted hooks. so if word is not correct.you can provider a reproduction link?

[a631807682]

link

https://codepen.io/a631807682/pen/jgqqJy?editors=1011#0

i chang the link to //deploy-preview-16681--element.netlify.com/element-ui.4b9a2bf.js , is a way to provider a reproduction link?

setp

1. click change visible button
2. can not scroll ( contents don't fill the container what infinite-scroll-immediate do)

@qingdengyue

[iamkun]

link

https://codepen.io/a631807682/pen/jgqqJy?editors=1011#0

i chang the link to //deploy-preview-16681--element.netlify.com/element-ui.4b9a2bf.js , is a way to provider a reproduction link?

setp

1. click change visible button
2. can not scroll ( contents don't fill the container what infinite-scroll-immediate do)

@qingdengyue

@qingdengyue same problem to me, please check the link above

[a631807682]

i suggest to create IntersectionObserver to watch element visible status when invisible, like this:

if (!isElementVisible(el) && !visibleObserver) {
	visibleObserver = new IntersectionObserver(onScroll);
	visibleObserver.observe(el);
}

ps: i am new to review, i chose to approved, but actually i wanted to choose request change and i don't know how to change it.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.