1

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...

Mr.Newt
  • 41
  • 3
  • 4
  • Is this table scrollable or is the _document_ or higher-up container the part that's scrollable? – Jacob Sep 09 '20 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 Sep 09 '20 at 18:55

2 Answers2

3

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 become 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.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Mosia Thabo
  • 4,009
  • 1
  • 14
  • 24
  • 1
    .table { border-collapse: collapse; overflow: scroll; height: 300px; } but it is not working( – Mr.Newt Sep 09 '20 at 19:08
  • @Mr.Newt , you need to make sure that there's enough content in your form that has a height larger than 300px. otherwise, the scroll bars won't show. – Mosia Thabo Sep 09 '20 at 19:12
  • Here's another example that can help you make it scrollable. https://stackoverflow.com/questions/8232713/how-to-display-scroll-bar-onto-a-html-table – Mosia Thabo Sep 09 '20 at 19:15
  • @Mr.Newt the table needs `display: block;` otherwise it will stretch to fit in the rows. It also makes the table inaccessible so keep that in mind. – evolutionxbox Sep 09 '20 at 23:34
  • 1
    adding display:block solve the issuse :D :D .thanks guys a lot – Mr.Newt Sep 10 '20 at 06:22
  • @Mr.Newt Didn't you follow my code? Everything is there for you man. You could've solved this long time ago already lol! – Mosia Thabo Sep 10 '20 at 07:39
1

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

Adel A
  • 46
  • 2