'In React, how to divert the scrolling to another element?

My APP has 3 divs: side, middle, and right.

The middle section will contain the content list of arbitrary number of items. It is set to the length of the vh. Thus, it will need to scroll when too many items are present.

The problem is when the user scroll over the side or right divs, nothing happens.

To solve, the problem, all scrolling should be diverted to the middle div, no matter where the pointer is hovering.

How can this be done in React?

javascripthtmlreactjsscrollscrollbar


Solution 1:[1]

Going by the first solution, I solved the smooth scroll problem by changing the code to this:

const handleScrolling = (event) => {
      if (contentRef !== null) {
        if (contentHover === false) {
          contentRef.current.scrollTo({
            top: contentRef.current.scrollTop + event.deltaY,
            behavior: "smooth",
          });
        }
      }
    };

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Big Cat Public Safety Act

Related Questions