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

Question

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 .

Answer 1

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>
  );
}