如何在HTML和CSS中构建静态滚动条

<div class="container">
  <!-- 内容 -->
</div>

.container {
  width: 200px; /* 容器宽度 */
  height: 300px; /* 容器高度 */
  overflow: auto; /* 显示滚动条 */
}

.container::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.container::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条颜色 */
  border-radius: 4px; /* 滚动条圆角 */
}

.container::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条背景色 */
}

<link rel="stylesheet" href="styles.css">