I cant figure out why onScroll is not firing console.log.. <table className="table" onScroll={()=>{console.log("Works")}> It's just not firing console.log...

I cant figure out why onScroll is not firing console.log.. <table className="table" onScroll={()=>{console.log("Works")}> It's just not firing console.log...

• javascript
• reactjs
• onscroll

• Is this table scrollable or is the document or higher-up container the part that's scrollable? – Jacob Commented Sep 9, 2020 at 18:55
• Does it scroll in the first place? I'm not sure tables can do this. You may have to wrap the table and put the event on that wrapping element. – evolutionxbox Commented Sep 9, 2020 at 18:55

2 Answers 2

The code will work. Your table needs to be scrollable. If there's no scroll-bar, then no scrolling event will be fired. Your table needs to be scrollable and I know by default tables don't normally stretched, they bee scrollable as soon as the content is too long. But you can set the scroll-bar using css. Here's just an example on how to make it work.

function App()
{

  return (
    <table className="table" onScroll={()=>alert("Table Scrolled")}>
      <tr>
        <td>First Row</td>
      </tr>
      <tr>
        <td>Second Row</td>
      </tr>
      <tr>
        <td>Second Row</td>
      </tr>
    </table>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

.table{
  overflow: scroll;
  height: 300px;
  background-color: yellow;
  display: block;
}


.table tr{
  width: 200px;
  height: 200px;
  background-color: grey;
  border: thin solid blue;
  margin: 1rem 0;
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

If your element doesn't "table" is not scrollable your event will simpely not happen, however if it is scrollable try to add this style to the element overflow: scroll