I have a section, then a horizontal scroll effect, but if I try to go back up to the initial section, it doesn’t seem to scroll back up on my computer.
Does anyone know the problem?
HTML (initial section & horizontal scroll effect):
const scrollContainer = document.querySelector(".info");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
.container {
color: white;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url(../images/philly-map.jpeg);
background-size: cover;
background-position: center;
}
.container p {
font-size: 1.5em;
padding: 20px;
}
.container h1 {
font-size: 3em;
}
.animate {
color: white;
font-size: 5em;
animation: animate 2s ease-in infinite;
opacity: 1;
transform: translateY(3em);
}
@keyframes animate {
0% {
opacity: 1;
}
75% {
opacity: 0;
transform: translateY(4em);
}
99% {
opacity: 0;
transform: translateY(3em);
}
100% {
opacity: 1;
}
}
.info {
overflow-x: hidden;
display: flex;
}
h1 {
margin: 0;
padding: 0;
}
.content {
min-width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 4ch;
}
.content:nth-child(even) {
background-color: teal;
color: white;
}
<div class="container">
<h1>Learn Where</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque saepe excepturi enim laboriosam velit quibusdam? Quisquam quo maxime doloribus, placeat repudiandae animi, similique praesentium amet, nostrum quam impedit tempora dignissimos.
</p>
<div class="animate"><i class="fa-solid fa-angle-down"></i></div>
</div>
<section class="info">
<section class="content">
<h1>Replace</h1>
</section>
<section class="content">
<h1>This</h1>
</section>
<section class="content">
<h1>Text</h1>
</section>
<section class="content">
<h1>Later</h1>
</section>
</section>
If someone could put code that would help a lot
2
Answers
You set
overflow-x:
hidden; for the section, and that’s why you are not seeing the overflow.You can see it by removing it.
How about something like this:
Where you allow the scroll in certain scenarios:
NOTE: This seems to not work very will in the minimized snippet, so test it full screen or copy the code into you work to test easier…