reactScrollbar
reactScrollbar copied to clipboard
souhe
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
