原生html+css 手写滚动条

好的，以下是一个基本的原生HTML+CSS手写滚动条的示例：

HTML代码：

<div class="scrollable">
  <div class="content">
    <!-- 这里是你的内容 -->
  </div>
</div>

CSS代码：

/* 滚动条容器 */
.scrollable {
  position: relative;
  height: 200px; /* 容器高度 */
  overflow: auto; /* 开启滚动条 */
}

/* 滚动条轨道 */
.scrollable::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 轨道背景色 */
  border-radius: 10px; /* 轨道圆角 */
}

/* 滚动条滑块 */
.scrollable::-webkit-scrollbar-thumb {
  background-color: #007bff; /* 滑块颜色 */
  border-radius: 10px; /* 滑块圆角 */
}

/* 滚动条鼠标悬停时的滑块样式 */
.scrollable::-webkit-scrollbar-thumb:hover {
  background-color: #0062cc; /* 滑块颜色 */
}

/* 滚动条宽度和高度 */
.scrollable::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

这个示例使用了 WebKit 浏览器的滚动条样式设置，因此只适用于基于 WebKit 的浏览器（如 Chrome、Safari 等），如果需要兼容更多浏览器，可以使用 JavaScript 实现自定义的滚动条。