I want to enable the mouse wheel to scroll the table horizontally.

How can I do it?

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

.container {
  overflow-x: auto;
}


tr:nth-child(even){background-color: #f2f2f2}

logic code:

function App() {
  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 className='container'>
          <table>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              {points_th}
            </tr>
              {row_1}
              {row_2}
              {row_3}
          </table>
        </div>
      </div>
  );
}

here is my demo:

I want to enable the mouse wheel to scroll the table horizontally.

How can I do it?

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

.container {
  overflow-x: auto;
}


tr:nth-child(even){background-color: #f2f2f2}

logic code:

function App() {
  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 className='container'>
          <table>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              {points_th}
            </tr>
              {row_1}
              {row_2}
              {row_3}
          </table>
        </div>
      </div>
  );
}

here is my demo: https://codesandbox.io/s/github/Kalipts/scroll_table

• javascript
• html
• css
• reactjs

Share Improve this question Follow edited Apr 8, 2020 at 11:24 keikai 15.2k1010 gold badges5555 silver badges7272 bronze badges asked Apr 8, 2020 at 10:58 kaliptskalipts 1,32711 gold badge1212 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Use onWheel event

The onwheel event occurs when the mouse wheel is rolled up or down over an element.

With Element.scrollTo(), Element.scrollLeft

The scrollTo() method of the Element interface scrolls to a particular set of coordinates inside a given element.

element.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

---

Code sample:

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

<div className="container" id="container" onWheel={onWheel}>

Refer: Horizontal Scrolling on React Component Using Vertical Mouse Wheel