2

Been searching and wasn't able to find the right solution for me. What I wanted to achieve is to trigger the @scroll functionality if and only the scroll is at the bottom of the element and when it's scrolled vertically only. This is the HTML:

<table @scroll="loadMoreData">
...
</table>

This is the Vue functionality:

loadMoreData({ target: { scrollTop, clientHeight, scrollHeight }}) {
     if (scrollTop + clientHeight >= scrollHeight) {
         // load more data here...
     }
},

This is working fine but the problem with this is it also triggers when scrolled horizontally. How to trigger this when scrolled vertically only? Thanks.

user3233787
  • 379
  • 1
  • 10
  • 32
  • 3
    I doubt this is possible, seeing as the underlying javascript event doesn't differentiate between horizontal and vertical scrolling. However, you can keep track of the vertical/horizontal position yourself to detect a horizontal scroll. – Stanislas Nov 25 '21 at 23:36
  • @Stanislas thanks for answering. What's the best way to track of the vertical position only? – user3233787 Nov 25 '21 at 23:46
  • Cache the values of `scrollTop` and `scrollLeft` and compare their value against current ones in the scroll handler. If `scrollTop` has changed but `scrollLeft` haven’t then you know it’s a purely vertical scroll. – Terry Nov 25 '21 at 23:57
  • I would take a look at this answer: https://stackoverflow.com/a/31223774/6822962 – Y. Gherbi Nov 26 '21 at 00:26

0 Answers0