I’m facing a challenge where I need a scrollable element positioned at the bottom of my webpage. Initially, I tried setting position: fixed along with bottom:0. However, this approach didn’t work for me since I require a horizontal list that can be scrolled through on the X-axis.
After some research, I realized that scrolling doesn’t function properly on elements with a position: fixed. Removing this property isn’t an option either because I want the element to remain at the bottom of the page. How can I overcome this obstacle?
Below is a visual representation of my current app:
const items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10', 'item11', 'item12', 'item13', 'item14', 'item15', 'item16', 'item17', 'item18']
const App = () => {
return (
<div>
My app...
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
<h3>The following are the two versions of my components:</h3>
<p style={{ color: 'blue' }}>Without position fixed (blue one): on the wrong spot but can scroll</p>
<p style={{ color: 'red' }}>With position fixed (red one): On the bottom of the screen as I want to, but cant scroll...</p>
<div style={{
display: 'flex',
bottom: 0,
position: 'fixed',
overflowX: 'scroll',
backgroundColor: 'red'
}}>
{items.map((item, index) => (
<div key={index} style={{ overflowX: 'visible', margin: '0 30px', height: '100%' }}>
<h2>{item}</h2>
</div>
))}
</div>
<div style={{
display: 'flex',
bottom: 0,
overflowX: 'scroll',
backgroundColor: 'blue'
}}>
{items.map((item, index) => (
<div key={index} style={{ overflowX: 'visible', margin: '0 30px', height: '100%' }}>
<h2>{item}</h2>
</div>
))}
</div>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('app')
);<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="app"></div>