Onscroll In React Functional Component
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"