I’ve been trying to build a web developer portfolio website, and am working on a layout in which my body is a flexbox with two main elements:
-
On the left, a basic navigation bar
-
On the right, a content box with section IDs that tie to the navigation bar.
What’s working: The content box overflows the parent container as desired, and I can scroll through the content smoothly with my scroll wheel if my cursor is over the content box. With smooth scroll enabled, I can click on the IDs in the nav bar, and fluidly scroll to the relevant sections.
My problem: I want the content box to scroll when I move the scroll wheel, no matter where the cursor is on the webpage – e.g. in the navigation bar, in the margins – as opposed to only scrolling if the cursor is in the content box. Once enabled, I want to maintain smooth scrolling for navigation bar clicks and scroll wheel scrolls.
I’m hoping someone can help me work this out, as I am unfortunately out of ideas! It feels like there may be a simple solution here, that I can’t see yet. : )
What I have tried:
I tried adding event listeners to the content box element to 1) prevent the default scroll and 2) force the content box to scroll no matter where the cursor is. While this does enable me to scroll the content box with the cursor outside of the content box as desired, and maintains smooth scrolling for navigation bar clicks, I lose smooth scrolling for scroll wheel scrolls, which is undesirable.
I was expecting to be able to scroll the content box from anywhere, and maintain smooth scrolling for both nav bar clicks and scroll wheel scrolls.
I’ve included the faulty script in my HTML snip, so that you can uncomment it and see what I mean.
HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./smoothscroll.css">
</head>
<body>
<div class="staticSection">
<nav>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#experience">EXPERIENCE</a></li>
<li><a href="#projects">PROJECTS</a></li>
</ul>
</nav>
</div>
<div class = "scrollSection" id="srollSection">
<div id="about">
<h1>About</h1>
</div>
<div id="experience">
<h1>Experience</h1>
</div>
<div id="projects">
<h1>Projects</h1>
</div>
</div>
</body>
<!-- Faulty JS Script. I tried to force the wheel events into the scroll section. This does successfully force the scroll section to scroll when the cursor is not in the scroll section (e.g. in the nav bar), but the scrolls are very disjoint and non-fluid, resulting in a very poor user experience -->
<!-- <script>
let mainContent = document.querySelector('.scrollSection');
function preventDefaultScroll(event){
event.preventDefault();
}
function enableFlexScroll(event){
mainContent.scrollTop += event.deltaY;
}
document.addEventListener('wheel', preventDefaultScroll, { passive: false });
document.addEventListener('wheel', enableFlexScroll, { passive: false });
</script> -->
</html>
CSS:
/* Flex container */
body{
display: flex;
height: 100vh;
margin: 0 10%;
overflow: hidden;
}
/* LHS Navigation */
.staticSection{
width: 25%;
background-color: antiquewhite;
}
/* RHS Scrolling Content */
.scrollSection{
width: 75%;
overflow-y: auto;
scroll-behavior: smooth;
}
#about, #experience, #projects{
height: 500px;
background-color: darkgray;
}
Matt Mogan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.