固定和可滚动的画廊列代码 - CSS

如果您需要在网站上展示图像序列或商品目录，那么固定和可滚动的画廊列代码就是一个必须掌握的技巧。这种技巧利用了CSS的强大能力，通过一些简单的布局技巧创建了固定或可滚动的画廊列。在这里，我们将介绍两种算法的代码来实现此目的。

固定的画廊列

目标：创建一个固定的画廊列，以便能够在页面上滚动浏览图片序列/商品目录。

实现方法：这种方法包含两个容器元素，一个固定元素和一个可滚动元素。固定元素包含左箭头和右箭头按钮，并能够水平滚动显示在屏幕上。可滚动元素包含图像序列或商品目录，能够沿着固定元素水平滚动。

在这里，我们使用flexbox布局来创建这样的画廊列。在以下代码中，container是一个固定高度的容器，内部包含一个flexbox列布局(parent)和一个flexbox行布局(child)。父容器(parent)包含左箭头和右箭头按钮，并定义了flex-wrap属性为nowrap，这使得内容不会换行。子容器(child)具有flex-wrap属性，因为我们需要内容在水平方向上滚动。

.container {
  height: 250px;
  overflow: hidden;
  position: relative;
}
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.child {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

可滚动的画廊列

目标：创建一个可滚动的画廊列，以便能够在页面上滚动浏览图片序列/商品目录。

实现方法：这种方法只需要一个容器元素，使用flexbox布局，并且包含一个flexbox行布局来定义图像序列或商品目录。通过定义overflow属性为auto，我们能够使包含图像序列或商品目录的容器出现滚动条。

在这里，我们使用flexbox布局来创建这样的画廊列。以下代码将容器简称为.wrapper，内部包含一个flexbox行布局(wrapper_inner)，这里我们定义了它的overflow属性为auto，这使得它内部的图像序列或商品目录可以通过滚动条在水平方向上滚动。

.wrapper {
  display: flex;
  overflow: auto;
}
.wrapper_inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

总结

这里介绍了两种实现固定和可滚动的画廊列的CSS算法，它们都使用了flexbox布局。简单而有效的设计使得它们能够适用于不同的应用场景，如图像序列或商品目录。在实际应用中，根据需求的不同，您可以相应地改变这些算法，使之更符合您的需求。