Question posted in 
I am creating a simple website with two sections on the page. On left side I will have links and on right side the content in scrollable way. On click of link the content on right will scroll to the specific content related to the link smoothly.
Below is the code and also jsfiddle where I have the sample code but the scrolling isn’t smooth.
Please check.
Index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>50/50 Scrollable and Non-Scrollable</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="left-side">
<div class="left-content">
<div class="left-inner">
<h1>First Last</h1>
<p>An easy way to get to know me</p>
</div>
</div>
<nav>
<ul>
<li><a href="#intro">About</a></li>
<li><a href="#work">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#achievements">Achievements</a></li>
<li><a href="#academics">Academics</a></li>
<li><a href="#socialwork">Social Work</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="right-side">
<div class="right-content">
<div class="right-inner">
<h1>Scrollable Content</h1>
</div>
</div>
<div class="scrollable-content">
<p>This side is scrollable.</p>
<div id="intro">
<h2 class="major">About Me</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="work">
<h2 class="major">Experience</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="projects">
<h2 class="major">Projects</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="achievements">
<h2 class="major">Achievements</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="academics">
<h2 class="major">Academics</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="socialwork">
<h2 class="major">Social Work</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="hobbies">
<h2 class="major">Hobbies</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="contact">
<h2 class="major">Contact</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
</div>
</body>
</html>
Styles.css
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
scroll-behavior: smooth;
}
.container {
display: flex;
height: 100dvh;
}
.left-side, .right-side {
width: 50%;
padding: 20px;
box-sizing: border-box;
}
.left-side {
background-color: #f0f0f0;
overflow: hidden;
}
.right-side {
background-color: #e0e0e0;
}
.right-side h1 {
height: 3rem;
margin: 1rem;
}
.scrollable-content {
height: calc(100% - 4rem);
overflow-y: scroll;
padding-right: 20px;
box-sizing: border-box;
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollable-content::-webkit-scrollbar {
display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}
3
Answers
Its probably the
height: 100dvh;property. Try removing it and testyour
scroll-behavior : smooth;is at a wrong placemove it to
.scrollable-content {in your CSSchange your css atrribute like this
And also add .section and section:target