horizontally scroll a table with mouse wheel in react without DOM Selector?

user_8329850 0
Viewed 2164

I am building a table horizontally scroll. But it has DOM selector. How I build it with out DOM Selector. Have any way to do it with state ?

const onWheel = e => {
  e.preventDefault();
  const container = document.getElementById("container");
  const containerScrollPosition = document.getElementById("container").scrollLeft;
  container.scrollTo({
    top: 0,
    left: containerScrollPosition + e.deltaY,
    behaviour: "smooth"
  });
};

my demo: https://codesandbox.io/s/silly-lamport-2do0l?file=/src/App.js .

reactjs
2 Answers

Using document.getElementById is a react anti-pattern. Use a react ref to access a DOM node.

refs and the dom

Since you have a functional component you can use the useRef hook, otherwise, the createRef can be used for a class-based component.

useRef

Moved the onWheel handler into the component so the ref is in scope. Also removed the optional behavior option, it was misspelled and using the default behavior, which is what you want anyway.

function App() {
  const onWheel = e => {
    e.preventDefault();
    const container = scrollRef.current;
    const containerScrollPosition = scrollRef.current.scrollLeft;

    container.scrollTo({
      top: 0,
      left: containerScrollPosition + e.deltaY,
    });
  };

  const scrollRef = useRef(null);

  const num = 50;
  let points_th = [];

  for (let i = 0; i < num; i++) {
    points_th.push(<th>Points</th>);
  }

  let row_1 = render_row("Jill", "Smith", 50, num);
  let row_2 = render_row("Eva", "Jackson", 94, num);
  let row_3 = render_row("Adam", "Johnson", 67, num);
  return (
    <div>
      <div
        ref={scrollRef}
        className="container"
        id="container"
        onWheel={onWheel}
      >
        <table>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            {points_th}
          </tr>
          {row_1}
          {row_2}
          {row_3}
        </table>
      </div>
    </div>
  );
}

Edit horizontal scroll using ref

user_86908570

Scroll behavior requires using DOM manipulation to some extent, however there is an easier way to get a reference to the node you want to scroll. You can create a ref in a hook component using:

const containerRef = useRef();

<div
    className="container"
    ref={containerRef}
    id="container"
    onWheel={onWheel}
  ></div>

And then you can get your container element using: const container = containerRef.current;

https://codesandbox.io/s/nifty-boyd-m5fg3?file=/src/App.js

user_131751380
Related