Active scss class on a table with horizontal and vertical scroll

Question

I'm working on a table with that has many columns and rows so it has an horizontal and vertical scroll.

The first column is fixed and it has a shadow. That shadow is visible only when the user scrolls horizontally.

I created a scss class active-scroll-shadow, and that class is active when the user scrolls horizontally.

I want to achieve the same behavior with the table vertical scrolling.

Is there a way to active a class on table vertical scroll event and not the browser scroll?

Stackblitz

Answer 1

Based on what you are doing with your horizontal scroll, you can get the vertical scroll with the .scrollTop property.

  onScroll(event) {
    console.log(`scrollLeft: ${this.scrollElem.scrollLeft}`);
    this.ApplyShadow = this.scrollElem.scrollLeft > 5;

    console.log(`scrollTop: ${this.scrollElem.scrollTop}`);
    this.ApplyVerticalShadow = this.scrollElem.scrollTop > 5;
  }

You'll probably need another variable just for the vertical shadow (I called it ApplyVerticalShadow) and then you can conditionally apply the shadow like you've done with the horizontal shadow. Hope this helps.