HMWDigital Space

WordPress｜Html+CSS横向滚动（Horizontal Scroll）卡片网格：Flex + scroll-snap 实现

用 CSS Flex 加 overflow-x 和 scroll-snap，做一排可以左右滑动的卡片：触屏上手指拖动，电脑上用滚轮、触控板或滚动条，停下时卡片自动对齐到左边。

效果演示

明宣德 青花牵牛花卉紋折方瓶
明宣德 青花牵牛花卉紋折方瓶
 明成化 斗彩团莲纹高足杯
明成化 斗彩团莲纹高足杯
 唐 四鸾衔绶纹金银平脱镜
唐 四鸾衔绶纹金银平脱镜
 清 乾隆 水晶五螭纹瓶
清 乾隆 水晶五螭纹瓶

实现思路

  • display: flex + overflow-x: auto：卡片排成一行，超出容器宽度时出现横向滚动条。
  • flex: 0 0 宽度：卡片宽度固定，不会被压缩。
  • scroll-snap-type: x mandatory + scroll-snap-align: start：滑动停下时，卡片自动吸附到容器左侧。
  • aspect-ratio + object-fit: cover：图片统一成 3:4，不管原图比例如何。

CSS

<div class="hmw-scrollrow" tabindex="0" role="region" aria-label="横向滚动卡片">
  <a class="hmw-card" href="链接 URL_1">
    <img src="图片 URL_1" alt="图片说明_1" loading="lazy">
    <div class="hmw-cap">卡片标题 1</div>
  </a>
  <a class="hmw-card" href="链接 URL_2">
    <img src="图片 URL_2" alt="图片说明_2" loading="lazy">
    <div class="hmw-cap">卡片标题 2</div>
  </a>
  <a class="hmw-card" href="链接 URL_3">
    <img src="图片 URL_3" alt="图片说明_3" loading="lazy">
    <div class="hmw-cap">卡片标题 3</div>
  </a>
</div>

tabindex="0" 和 role="region" 让键盘用户可以用 Tab 聚焦这一行，再用方向键左右滚动。

HTML

/* =====================
   横向滚动卡片行
===================== */
.hmw-scrollrow{
  display:flex;
  gap:28px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px 6px 18px;
  scroll-snap-type:x mandatory;

  /* 滚动条样式 */
  scrollbar-color:rgba(0,0,0,.55) rgba(0,0,0,.12);
  scrollbar-width:thin;
}
.hmw-scrollrow::-webkit-scrollbar{height:6px;}
.hmw-scrollrow::-webkit-scrollbar-track{background:rgba(0,0,0,.12);border-radius:999px;}
.hmw-scrollrow::-webkit-scrollbar-thumb{background:rgba(0,0,0,.55);border-radius:999px;}

/* 键盘聚焦时显示轮廓 */
.hmw-scrollrow:focus-visible{
  outline:2px solid rgba(0,0,0,.4);
  outline-offset:4px;
}

/* 卡片：宽度最大 420px，手机上不超过屏幕宽度的 80% */
.hmw-scrollrow > .hmw-card{
  flex:0 0 min(420px, 80vw);
  scroll-snap-align:start;
  text-decoration:none;
  color:inherit;
}

/* 图片：统一 3:4 */
.hmw-scrollrow > .hmw-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  border-radius:2px;
}

/* 图片下方的说明文字 */
.hmw-scrollrow .hmw-cap{
  margin-top:14px;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.5;
}

在 WordPress 中使用

用「自定义 HTML」块放入 HTML；CSS 可以放在同一个块里的 <style> 标签中，也可以放到「外观 → 自定义 → 额外 CSS」，这样多个页面都能共用。

自定义

  • 卡片宽度：改 min(420px, 80vw) 里的 420。
  • 卡片间距：改 gap。
  • 图片比例：改 aspect-ratio，例如 1/1（正方形）、4/3（横向）。
  • 想要自由停靠：把 mandatory 改成 proximity，吸附就不那么强制。
  • 想隐藏滚动条：把滚动条相关的几条规则改成 scrollbar-width:none（但会让用户不容易发现可以滚动，不推荐）。

常见问题

手机上卡片太宽？
已经用 min(420px, 80vw) 限制，手机上每张卡片最多占屏幕宽度的 80%，右边会露出下一张的一部分，提示可以继续滑动。

和其他用了 .hmw-card 的组件冲突？
所有样式都限定在 .hmw-scrollrow 里，不会影响页面上其他卡片。

更多文章