在我们使用 Web 开发时，许多情况下我们需要实现水平滚动效果，例如轮播图、横滑导航等。而在 CSS 中实现水平滚动效果，我们通常会使用 overflow: auto 属性进行实现。不过，这种方法存在许多限制，例如无法对滚动条进行样式调整，滚动缓慢、卡顿等问题。那么，有没有更好的方法来实现水平滚动效果呢？
答案是：使用 CSS Grid 布局。CSS Grid 是一种强大且灵活的布局系统，它可以轻松地实现复杂的布局。它提供了一种简便的方式来创建水平滚动区域，即使用 grid 容器和 grid 元素实现。
实现步骤
- 创建一个 grid 容器，并设置它的 display 属性为 grid。
.container {
display: grid;
}- 设置 grid 容器的 grid-template-columns 属性为 repeat(auto-fit, minmax(200px, 1fr))。其中 auto-fit 表示自动调整列数以适应容器宽度，minmax(200px, 1fr) 表示列的最小宽度为 200 像素，最大宽度为 1 个单位（自适应宽度）。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}- 为 grid 容器设置 overflow-x 属性为 scroll，这个属性用于控制容器的滚动方式。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
overflow-x: scroll;
}- 最后一个步骤就是将项目放入 grid 容器中。这里使用的例子是一组图片卡片。
-- -------------------- ---- -------
---- ------------------
---- -------------
---- ---------------- -------
------------
----------
------
---- -------------
---- ---------------- -------
------------
----------
------
---
------- 值得注意的是，由于 grid 容器本身就是一个水平滚动区域，因此 grid 元素中的每个项目正常放置时会自动换行到下一行，我们需要使用 white-space: nowrap 属性来防止这种现象发生。
.item {
white-space: nowrap;
}示例代码
HTML 代码：
-- -------------------- ---- -------
---- ------------------
---- -------------
---- ---------------- -------
------------
----------
------
---- -------------
---- ---------------- -------
------------
----------
------
---- -------------
---- ---------------- -------
------------
----------
------
---
------CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ---------------- ------------- ------ ----------- ------- - ----- - ------------ ------- -
总结
使用 CSS Grid 实现水平滚动效果，不仅可以让滚动更加流畅、更好地控制滚动条的样式调整，还可以让布局更加灵活。不过，需要注意的是，CSS Grid 目前还不是所有浏览器都支持，如果需要在一些老旧的浏览器上使用，需要进行兼容性处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503354d95b1f8cacd03c698