Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a scroll bar to a component in React?

I'm using a grid system with 3 columns in my SPA. The left and right list contain components that occupy 100 of the viewport height. The middle column contains a long list and would like to add a scrollbar just to the middle component. I've tried to wraw the middle component with several different scrollbar components but nothing works. I end up always with a main page scroll which leaves me only with the list component when scroll further down and left and right component are remaining remain to the top of the page.

like image 876
Kleo Avatar asked Jun 16 '18 20:06

Kleo


People also ask

How do you add a scrollbar to a component in React?

You can apply it by placing the overflow-y:scroll in the id growth inside the style tag. Notice the scroll bar on the right side of the div .

How do I make my React component scrollable?

To make a horizontally scrollable div we have to write overflow-x: scroll; with white-space: nowrap; ( in the case of text content ) and it will make a horizontally scrollable div.


1 Answers

Found the solution, need to set fixed height to left and right component and overflow:scroll to middle component.

like image 185
Kleo Avatar answered Oct 30 '22 14:10

Kleo