我正在创建一个简单的网站，页面上有两个部分。左侧有链接，右侧有可滚动的内容。单击链接时，右侧内容将平滑滚动到与链接相关的特定内容。
下面是代码，还有jsfiddle，我有示例代码，但滚动不流畅。 请检查。
索引.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>
样式.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 */
}
它可能是
height: 100dvh;