HTML原生在桌面端弹出日历、移动端才触发滚动选择器，不支持持续滚动与自定义；真滚动需flatpickr等库或手写组件，但后者坑多。
HTML原生为什么不能滚动选择
原生 <input type="date"> 在桌面浏览器（Chrome/Firefox）里是弹出日历面板，在 iOS/Android 上才触发系统级滚动滚轮选择器。它不提供“持续滚动”交互能力，也不能自定义样式或行为——这是浏览器实现决定的，不是你代码写错了。
如果你看到“滚动选择”效果（比如上下滑动切换年月日），那一定是用了第三方 JS 库或自己写的滚动组件，不是纯 HTML 能做到的。
用 <select></select> + onChange 模拟滚动感（轻量方案）
真想零依赖、不用框架又接近“滚动选择”体验，可以用三个 <select></select> 分别控制年、月、日，并用 CSS + transform: translateY() 配合过渡动画模拟滚动惯性。但注意：这不是真正滚动，只是视觉反馈。
- 年份列表建议从当前年 ± 10 年开始，避免过长下拉卡顿
- 月份固定 1–12，但需监听年份变化后重置日期选项（比如 2023-02 最多 28 天，2024-02 是 29 天）
- 日期选项必须动态生成，不能静态写死；否则选 2024 年 2 月时还显示 31 天就出错
- 移动端 Safari 对
<select></select>的样式限制极严，appearance: none基本无效，滚动感只能靠 JS 模拟
用 flatpickr 实现真实滚动选择（推荐）
真正支持触摸滚动、惯性滑动、iOS/Android 原生风格的日期选择器，flatpickr 是目前最轻量且兼容性好的选择。它默认启用“滚动模式”（mobile mode）在触屏设备上自动激活，无需额外配置。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
示例最小化引入：
<input id="datepicker" type="text">
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js"></script>
<script>
flatpickr("#datepicker", {
enableTime: false,
dateFormat: "Y-m-d",
// mobile: true // 默认已根据 UA 自动启用
});
</script>
- 不加
mobile: true也行，flatpickr会检测matchMedia("(pointer: coarse)")自动切滚动模式 - 如果强制桌面端也用滚动（比如给平板做统一体验），显式设
mobile: true - 它不依赖 jQuery，压缩后仅 ~25KB，比
pickadate或air-datepicker更省 - 注意：不要混用
type="date"和flatpickr，否则 iOS 可能同时弹两个选择器
自己写滚动选择器要注意的底层坑
如果你坚持手写（比如嵌入小程序或定制极高），核心是监听 touchstart/touchmove/touchend，计算位移、速度、回弹。但这些细节极易翻车：
- 滚动容器必须设
overflow-y: hidden，子项用position: absolute+top定位，不能靠scrollTop—— iOS Safari 对scrollTop在非 body 元素上支持不稳定 - 日期对齐逻辑要按“中心高亮”设计：滚动停止后，最近的日期项需自动吸附到容器正中央，这需要精确计算项高度和偏移余数
- 不同设备像素比（dpr）会影响 touchmove 的
clientY精度，直接相减可能跳变，得用pageY并减去容器 offsetTop - Android Chrome 有时会触发默认页面滚动，必须在
touchmove里e.preventDefault()，但要小心别禁掉所有滚动
滚动选择器看着简单，实际要处理惯性、吸附、边界、dpr、UA 判断、无障碍焦点……除非有强定制需求，否则真没必要从零写。
