I have 3 "pages" and want to scroll them horizontally. I have successfully created a horizontal scrollbar, but nothing happens when I scroll up/down with the mouse wheel.
This is what my container looks like:
body .container { width: 100%; height: 100%; scroll-snap-type: x mandatory; overflow-x: scroll; display: flex; }Full HTML CSS:
body { width: 100vw; height: 100vh; margin: 0; } body .container { width: 100%; height: 100%; scroll-snap-type: x mandatory; overflow-x: scroll; display: flex; } body .container section { flex: none; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; scroll-snap-align: start; } body .container section:nth-of-type(1) { background-color: rgb(33, 59, 27); color: green; } body .container section:nth-of-type(2) { background-color: rgb(45, 42, 39); color: rgb(182, 216, 182); } body .container section:nth-of-type(3) { background-color: rgb(52, 41, 33); color: rgb(87, 33, 233); } body .container section h1 { font-family: "Courier New", Courier, monospace; font-size: 10em; } body .container section p { font-size: 12px; }
<!-- main wrapper of the content for the whole webpage --> <div class="container"> <!-- sections of the web page --> <section> <h1>Page1</h1> <p>random text</p> </section> <section> <h1>Page2</h1> </section> <section> <h1>Page3</h1> </section> </div>
I tried Google but didn't find any solution...I got all this from YouTube tutorials.
Some JavaScript is required here, and the width and height attributes must be removed from the container
const scrollContainer = document.querySelector(".container"); scrollContainer.addEventListener("wheel", (evt) => { evt.preventDefault(); scrollContainer.scrollLeft += evt.deltaY; });
body { width: 100vw; height: 100vh; margin: 0; } body .container { overflow-x: scroll; display: flex; } body .container section { flex: none; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; scroll-snap-align: start; } body .container section:nth-of-type(1) { background-color: rgb(33, 59, 27); color: green; } body .container section:nth-of-type(2) { background-color: rgb(45, 42, 39); color: rgb(182, 216, 182); } body .container section:nth-of-type(3) { background-color: rgb(52, 41, 33); color: rgb(87, 33, 233); } body .container section h1 { font-family: "Courier New", Courier, monospace; font-size: 10em; } body .container section p { font-size: 12px; }
Page1
random text
Page2
Page3