css和div制作图片滚动条

CSS和DIV制作图片滚动条：现在许多网站都有图片滚动条的效果，这种效果可以给用户带来很好的视觉体验。下面我们就来介绍一下用CSS和DIV制作图片滚动条的方法。

html {
  scroll-behavior: smooth;
}

.image-scroll-wrap {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
}

.image-scroll-content {
  width: 3000px;
  height: 100%;
  display: flex;
}

.image-item {
  width: 300px;
  height: 100%;
  margin-right: 20px;
  background-color: #ccc;
}

.image-item:last-child {
  margin-right: 0;
}

首先，在 HTML 中设置 scroll-behavior: smooth;，这是平滑滚动的效果，可以提高用户体验。接着，我们建立一个图片滚动条的容器，设置其宽度为100%，高度为300px，并使用CSS的 overflow-y: scroll; 来使其竖向滚动。

然后，我们在容器内再建立一个元素，作为滚动的内容，设置其宽度为 3000px，高度为100%，并使用 display: flex; 将其所有子元素水平排列。这个内容元素中，我们可以添加多张图片，每张图片的宽度为 300px，高度与滚动容器相同，同时为了美观，我们为相邻图片之间设置了20px的间距。

最后，我们为每个图片设置一个 class 名称为 “image-item”，其中最后一张图片的右边距设为0，以便最后一张不会在右边留下间隙。这样，我们就完成了一个简单的 CSS 和 DIV 的图片滚动条了！