INTERACTION
拖拽滚动Drag to Scroll
桌面端也能像手机一样按住拖动横向列表，光标变成"抓手"。
效果预览
按住拖动
横向列表
抓手光标
惯性滑动
试试 →
cursor: grab / grabbing
适合用在哪
横向卡片列表、时间轴、图片长卷的桌面端体验补全。
容易踩的坑
- 没有 5px 位移阈值区分拖与点，拖完松手误触发卡片内链接跳转。
- 拖动中未禁用图片原生拖拽，浏览器拖出半透明图片影子打断操作。
- 只做鼠标拖动没有键盘方案，键盘用户无法横向浏览隐藏的卡片。
设计提示词 · Prompt
拖拽滚动（Drag to Scroll）：容器 overflow-x:auto + cursor:grab；mousedown 记录起点，mousemove 时 scrollLeft = 起始值 - (当前x - 起点x)，mouseup 结束；拖动中 cursor:grabbing 且禁用文本选中（user-select:none）和子元素点击（用位移阈值 5px 区分"拖"与"点"）。惯性滑动：mouseup 时用最后速度做衰减动画（或直接用原生 scroll-behavior 配合库）。移动端本来支持触摸滚动，此方案只为桌面补全。务必保留滚轮/触控板横向滚动可用。
Drag to Scroll: Container with overflow-x:auto + cursor:grab; on mousedown record the starting point, on mousemove set scrollLeft = start value - (current x - start x), end on mouseup; while dragging use cursor:grabbing and disable text selection (user-select:none) and child clicks (use a 5px movement threshold to distinguish "drag" from "click"). Inertial scrolling: on mouseup, run a decay animation using the last velocity (or use native scroll-behavior with a library). Mobile already supports touch scrolling; this approach only fills the gap on desktop. Make sure mouse-wheel/trackpad horizontal scrolling remains usable.
常见搭配
同一页面里经常和「拖拽滚动」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s">
<div class="d-dragscroll">
<div class="d-dragscroll__c" style="background:var(--i-gd)">按住拖动</div>
<div class="d-dragscroll__c" style="background:linear-gradient(135deg,#0891b2,#4f46e5)">横向列表</div>
<div class="d-dragscroll__c" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">抓手光标</div>
<div class="d-dragscroll__c" style="background:#17171b">惯性滑动</div>
<div class="d-dragscroll__c" style="background:#334155">试试 →</div>
</div>
<div class="d-dragscroll__tag">cursor: grab / grabbing</div>
</div>