onScroll in React functional component

Question

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

Is this table scrollable or is the document or higher-up container the part that's scrollable? — Jacob
– 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
– evolutionxbox, Commented Sep 9, 2020 at 18:55

Mosia Thabo · Accepted Answer · 2020-09-09 19:04:39Z

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>

answered Sep 9, 2020 at 19:04

Mosia Thabo

4,2871 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mr.Newt Over a year ago

.table { border-collapse: collapse; overflow: scroll; height: 300px; } but it is not working(

Mosia Thabo Over a year ago

@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 Over a year ago

Here's another example that can help you make it scrollable. stackoverflow.com/questions/8232713/…

evolutionxbox Over a year ago

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

Mr.Newt Over a year ago

adding display:block solve the issuse :D :D .thanks guys a lot

|

Adel A · Accepted Answer · 2020-09-09 19:07:13Z

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

answered Sep 9, 2020 at 19:07

Adel A

462 bronze badges

Collectives™ on Stack Overflow

onScroll in React functional component

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related