reactScrollbar
reactScrollbar copied to clipboard
Horizontal scrollbar is not working
- App.js
import React from 'react';
import ScrollArea from 'react-scrollbar';
function App() {
let itemElements = [];
for (let i = 1; i <= 40; i = i + 1) {
itemElements.push(
<div className="items">Text Content {i}</div>
)
}
return (
<>
<div style={{ margin: '4em' }}>
<h4>Horizontal scrollbar</h4>
<ScrollArea
className="area"
contentClassName="content"
vertical={false}
smoothScrolling
>
{itemElements}
</ScrollArea>
</div>
<div style={{ margin: '4em' }}>
<h4>Vertical Scrollbar</h4>
<ScrollArea
className="area2"
smoothScrolling
>
{itemElements}
</ScrollArea>
</div>
</>
);
}
export default App;
- CSS CODE
.area { height: 80px; width: 300px; border:1px solid red; white-space: nowrap !important; } .items { margin:10px; display: inline-block !important; width: 150px; border:1px solid blue; } .content { width: 500px; } .area2 { border: 1px solid; height: 300px; width: 300px; }
Horizontal scroll is not coming, vertical scroll is working perfectly. I want to display all the records. can you please write a code for horizontal scroll. Please check the attached screen shot
Please send me code for to display all the items using horizontal scroll
React v16.11.0 It doesn't work on my side either.
React 16.13.1 It doesn't work
doesnt work on 17.0.2 either