I need help implementing a site using React that scrolls horizontally.
I'm unsure how to implement certain aspects, so I am looking for some assistance.
Within a wrapper, I have multiple container Divs.
<div class="wrapper">
<div class="section" id="section1"> <!-- Should occupy 100% of the screen -->
<h2>Section Header</h2>
<p>
Some Text
</p>
</div>
<div class="section" id="section2"> <!-- Should occupy 100% of the screen -->
<h2>Section Header</h2>
<p>
Some Text
</p>
</div>
</div>
I want each .section to take up the entire width of the screen (not just the parent) and scroll horizontally.
.wrapper{
background:#000;
width:12000px; /* Must adapt based on content */
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
My issue is that I do not want to specify a fixed width for the wrapper (as seen in my example with 12000px). I would like it to be flexible.
.section{
width: 4000px; /* Should be equal to 100% of the client screen size */
float: left;
height: 100%;
}
What would be the most effective way to make the .wrapper dynamic, adjusting its width based on its content? And how can I ensure that the .sections classes occupy 100% of the screen width (and not just their parent)?
Additionally, any guidance on customizing mousewheel behavior would be greatly appreciated.
Thank you.