原生html无picker组件，滚动选择器需css+js模拟，scroll-snap-type是兼容性好、代码少的方案；手写touch事件可实现ios惯性滚动；第三方库存在维护、多列、尺寸计算等问题；简单场景推荐伪元素修饰的原生select。
原生 HTML 没有 <input type="picker"> 或滚动式选择器组件，所谓“HTML picker 滚动选择”实际是用 CSS + JavaScript 模拟的滚轮效果，核心靠 scroll-snap 或手动监听 touchmove/mousewheel 实现位置对齐。
用 scroll-snap-type 做最简滚动对齐（现代浏览器）
这是目前兼容性较好、代码量最少的方案，适合年份、月份、固定选项列表等静态数据。关键不是写 JS，而是让容器滚动「自动吸附」到每个选项位置。
- 容器设
scroll-snap-type: y mandatory（垂直强制吸附），子项设scroll-snap-align: center - 必须关闭默认滚动条干扰：
overflow-y: scroll+-webkit-overflow-scrolling: touch（iOS 流畅拖拽） - 子项高度需统一且可被容器整除，否则吸附错位；推荐用
flex-direction: column布局 +min-height: 100vh容器确保可视区高度稳定 - 不支持动态加载或模糊搜索；滚动后无法直接读取“当前选中值”，得靠
getBoundingClientRect()计算最近项
<div class="picker" style="height: 200px; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;"> <div class="item" style="height: 50px; scroll-snap-align: center;">2020</div> <div class="item" style="height: 50px; scroll-snap-align: center;">2021</div> <div class="item" style="height: 50px; scroll-snap-align: center;">2022</div> </div>
手写 touchstart/touchmove 实现 iOS 风格惯性滚动
要还原 iOS 原生 <select></select> 的阻尼、回弹、快速滑动停靠效果，必须接管触摸事件。重点不在“滚动”，而在“松手后根据速度自动滑向最近选项”。
- 记录
touchstart的clientY和时间戳，touchmove中计算位移和瞬时速度 -
touchend后用requestAnimationFrame模拟减速动画，目标位置 = 当前 scrollTop ± 速度 × 减速系数，再取模对齐到选项边界 - 务必加防抖：同一区域连续触发
touchstart时清空上一次动画帧 - PC 端需额外监听
mousewheel并映射为等效 touch 事件，否则桌面用户无法操作 - 注意 iOS Safari 的
body { overscroll-behavior: contain }会禁用滚动边界效果，得在 picker 容器上单独设置
为什么不用第三方库（如 pickadate 或 vanilla-picker）？
多数轻量 picker 库本质仍是 position + transform 模拟滚动，但封装了对齐逻辑和事件代理。问题在于：
-
pickadate已停止维护，vanilla-picker不支持多列联动（如省市区） - 所有库都依赖 DOM 尺寸计算，若选项文字动态变化（比如中英文切换）、字体加载延迟，会导致吸附位置偏移
- 它们默认把 value 存在
data-value，但表单提交时不会自动同步到<input>的value，仍需手动绑定change事件 - 真要省事，不如直接用
<select></select>+appearance: none隐藏原生下拉箭头，再用伪元素画个滚动指示器——简单场景够用，且无障碍友好
滚动 picker 最容易被忽略的是触控反馈延迟：手指刚抬起时视觉还没停稳，用户会下意识再点一下，结果触发两次选择。解决方法不是加 loading，而是用 transform: scale(0.98) 在 touchstart 瞬间做微缩反馈，并在动画结束前禁用再次交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
