I have a Javascript (React) application that has many modular components within a larger parent element.

Each one of these modular components displays a decent amount of data, mostly in a tabular view. Each one of these tabular views is more than likely to contain a scroll bar.

I am trying to change where the tabular view picks up the scroll event. Ideally, I'd like the table to scroll when the cursor is on the table header, and when it is inside the modular component itself.

If it helps, the tabular views are all created using ag-grid and the modular components are created using react-grid-layout.

How can I change (either in CSS or JS) where an element picks up a scroll event?