vaadin-grid detect scroll listener

Flow
1

Hello. I am using vaadin-grid for displaying log entries, i.e.

render() {
    return html`
      <vaadin-grid id="log" ?hidden=${!this.showLog} .items=${this.logMessages}>
        <!-- Log entry column -->
        <vaadin-grid-column .renderer=${this._logEntryRenderer}>
        </vaadin-grid-column>         
      </vaadin-grid>
    `;
  }

I would like to detect when the user scrolls up, down or to the latest entry. I am using the following code to register a listener for detecting the scroll event but to no avail. Any help is much appreciated. Thanks.

this.logGrid = this.shadowRoot.getElementById('log');
this.logGrid.addEventListener('scroll', function (event) {
      console.log("Scrolled");
}.bind(this));
2

Hi, listening to scroll events isn’t supported by the public API. You could try listening to the scroll events of the internal <table> element and possibly use the <vaadin-grid>'s overflow attribute to determine if you’ve reached an end.

Something like:

grid.$.table.addEventListener('scroll', () => {
  requestAnimationFrame(() => console.log(grid.getAttribute('overflow')))
})
3

Hi Tomi! Thanks for your help, much appreciated.

Your suggestion works and the listener code runs every time I scroll using the mouse wheel or keyboard arrows but not when I am using the scroll bar of the grid (I mean holding and moving the scroll bar). There is a vaadin-grid-outer-scroller that is used so maybe I need to somehow register a listener for this also. The overflow attribute sounds interesting to use but unfortunately is not adequate to determine the direction of the scroll. I often get “bottom top” both when I scroll upwards and downwards.

As an alternative solution, without using listeners, I tried to compare the values of this.logGrid._getRowTarget().style["height"] and this.logGrid._scrollBottom but I am not sure if this is the right approach. I couldn’t find any doc about getRowTarget() height but I suspect that it returns the full height of grid rows as it is increasing when new entries are added.

Thanks very much for your feedback I will try to resolve this in one or another way.