tangbc / vue-virtual-scroll-list

⚡️A vue component support big amount data list with high render performance and efficient.
https://tangbc.github.io/vue-virtual-scroll-list
MIT License
4.41k stars 592 forks source link

Fix infinite scrollToBottom method #390

Closed korungg closed 2 years ago

korungg commented 2 years ago

What kind of this PR? (check at least one)

Other information:

In certain condition, the method scrollToBottom stuck in infinite loop due to this recursive statement.

setTimeout(() => {
  if (this.getOffset() + this.getClientSize() < this.getScrollSize()) {
    this.scrollToBottom()   
  }
}, 3)

The condition for checking whether scroll is at bottom or not equals to below.

scroller.scrollTop + scroller.clientHeight < scroller.scrollHeight

It works usually, but in case that clientHeight is non-integer value, there can be a problem. Since user agents round those values(in my case, Chrome), sum of scrollTop and clientHeight can be 1px smaller than scrollHeight, though scroll is at bottom.

For example, this was my case.

real clientHeight: 533.41
real scrollHeight: 1511.58

rounded clientHeight: 533
rounded scrollHeight: 1512
scrollTop(double, not rounded): 978

scrollTop + clientHeight = 1511 // smaller than scrollHeight though scroll is at bottom

I'm not sure how scrollTop value is calculated internally, but tiny change can fix the problem. (https://stackoverflow.com/a/32283147)