Skip to content Skip to sidebar Skip to footer
Home / Javascript / Onscroll / Reactjs

Onscroll In React Functional Component

Post a Comment
I cant figure out why onScroll is not firing console.log.. {console.log('Works')}> It's just not firing console.log...

Solution 1:

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.

functionApp()
{

  return (
    <tableclassName="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;
}


.tabletr{
  width: 200px;
  height: 200px;
  background-color: grey;
  border: thin solid blue;
  margin: 1rem0;
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><divid="root"></div>

Solution 2:

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

Post a Comment for "Onscroll In React Functional Component"

Menu Halaman Statis