如何快速创建水平滚动容器

前言

作为前端开发者，越来越频繁地收到包含水平滚动组件的设计。这在移动端变得尤为常见，可以帮助减少密集页面的垂直高度。我们都见过下面类似的效果。

在构建了几个这样的组件并在质量保证过程中遇到了一些意外错误后，想找出如何仅使用最少的代码创建一个按预期在所有设备上工作的水平滚动器。

首先，让我们创建一个容器和其中的子 div 元素，使其能够水平滚动。HTML 代码非常简单：

<div class="scrolling-wrapper">
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
</div>

有两种不同的方法可以使这些 div 元素水平滚动，选择哪一种可能取决于个人偏好和/或浏览器支持。

第一种方法：white-space

下面是需要的所有 CSS 代码。没有 vendor 前缀，没有 jQuery，只是简单地使用了 overflow 和一个你可能不熟悉的属性。

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.card {
  display: inline-block;
}

对于容器，想要关闭垂直滚动 overflow-y，启用水平滚动 overflow-x。然后对于每个卡片，希望将其设置为 inline-block，以便它们都在一行显示。

有可能不熟悉的 CSS 属性是 white-space: nowrap。这个属性用于控制文本如何围绕容器换行。在这种情况下，想要通过使用 nowrap 来禁用换行。

就是这样。只用了四行 CSS 属性，就创建了一个水平滚动容器。

至于浏览器支持？常用浏览器完全没问题。除非想要适配 Internet Explorer 或 Edge。微软表示可能会在将来的 Edge 版本中包含该功能。但目前还不可用。

第二种方法：Flexbox

Flexbox 也可以实现这个效果。

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.card {
  flex: 0 0 auto;
}

使用 flex-wrap 实现了与上面的 white-space 相同的效果。两个属性的作用没有实质区别。

Flexbox 解决方案的浏览器支持更好。需要为旧版浏览器添加一些 vertical 前缀，但至少这个解决方案在 IE 和 Edge 上可以工作。

溢出滚动

在 iOS 上，网页在上下滚动时会带有动量。如果快速向上或向下滑动手指，页面会在松开手指后继续滚动。如果达到页面的顶部或底部，页面会超过包装器的边界，并弹回原位。

对于水平元素，默认情况下，没有平滑滚动效果。

注意： 虽然前缀中包含 webkit，但这在 iOS 上最明显。

.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;
}

现在，我们的水平容器具有平滑滚动效果。以下是示例：

滚动条

默认情况下，具有滚动内容的容器会有滚动条。但是，出于用户体验或设计的目的，如果不希望出现滚动条，那也很简单。仅适用于 WebKit 浏览器。

.scrolling-wrapper::-webkit-scrollbar {
  display: none;
}

总结

随着这种设计的越来越常见，可以将这些代码片段存起来，因为可能会不断的复用。由于这功能非常简单，可以将其包裹在媒体查询中，仅对某些设备显示水平滚动器，无需使用 jQuery 或其他混乱的东西。