css滚动流畅

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smooth Scroll Example</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
  }
  .scroll-container {
    height: 100vh;
    overflow-y: auto;
    scroll-behavior: smooth;
  }
  .scroll-item {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
  }
  .scroll-item:nth-child(odd) { background-color: #f0f0f0; }
  .scroll-item:nth-child(even) { background-color: #e0e0e0; }
</style>
</head>
<body>
<div class="scroll-container">
  <div class="scroll-item">1</div>
  <div class="scroll-item">2</div>
  <div class="scroll-item">3</div>
  <div class="scroll-item">4</div>
  <div class="scroll-item">5</div>
</div>
</body>
</html>