SCROLL EFFECT
横向滚动区Horizontal Scroll Section
在竖直的页面里嵌一段左右滑动的卡片列，打破滚动方向的单调。
效果预览
品牌识别12 个案例
界面设计28 个案例
增长实验16 个案例
更多 →滑动查看
← 左右滑动 · scroll-snap 吸附对齐 →
适合用在哪
案例展示、课程列表、评价轮播、产品系列。
容易踩的坑
- 隐藏滚动条又不加渐隐遮罩或箭头，桌面用户根本不知道这里可以横向滑动。
- 卡片内含可聚焦链接但容器不可键盘滚动，Tab 到屏幕外的卡片时视图不跟随。
- 横向容器未设 overscroll-behavior-x:contain，手机滑到尽头会触发浏览器返回手势。
设计提示词 · Prompt
横向滚动区（Horizontal Scroll Section）：外层 overflow-x:auto、display:flex、gap 16-24px，子卡片 flex:0 0 固定宽（280-400px），隐藏滚动条（scrollbar-width:none），加 scroll-snap-type:x mandatory + 子项 scroll-snap-align:start 让滑动吸附对齐。两端用渐变遮罩（mask-image）暗示"还能滑"。桌面端可加左右箭头按钮按卡宽滚动。触控板和手机上保留原生滚动手感。
Horizontal Scroll Section: outer container overflow-x:auto, display:flex, gap 16-24px; child cards flex:0 0 fixed width (280-400px); hide the scrollbar (scrollbar-width:none); add scroll-snap-type:x mandatory + scroll-snap-align:start on children so swiping snaps into alignment. Use gradient masks (mask-image) at both ends to hint "there's more to scroll". On desktop, add left/right arrow buttons that scroll by one card width. Keep the native scrolling feel on trackpads and phones.
常见搭配
同一页面里经常和「横向滚动区」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s">
<div class="d-hscroll">
<div class="d-hscroll__card" style="background:var(--i-gd)"><b>品牌识别</b><span>12 个案例</span></div>
<div class="d-hscroll__card" style="background:linear-gradient(135deg,#0891b2,#4f46e5)"><b>界面设计</b><span>28 个案例</span></div>
<div class="d-hscroll__card" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><b>增长实验</b><span>16 个案例</span></div>
<div class="d-hscroll__card" style="background:#17171b"><b>更多 →</b><span>滑动查看</span></div>
</div>
<div class="d-hscroll__tag">← 左右滑动 · scroll-snap 吸附对齐 →</div>
</div>