移动端外卖点餐页分类与菜单联动需结合DOM测量、滚动监听和状态同步，通过scroll-view/scrollIntoView实现精准滚动，用getBoundingClientRect动态计算位置区间匹配高亮，并采用flex响应式布局与触控优化保障体验。
移动端外卖点餐页的分类与菜单联动，核心是让左侧分类栏点击时右侧精准滚动到对应区块，同时右侧滑动时左侧实时高亮当前分类。这不是纯CSS能解决的交互，必须结合DOM测量、滚动监听和状态同步，且要适配不同屏幕尺寸和触控行为。
用 scroll-view + ID 锚点实现精准滚动（小程序/H5通用）
微信小程序直接支持 scroll-into-view 属性，H5 可用 element.scrollIntoView({ block: 'start', behavior: 'smooth' })。关键不是“跳转”，而是让每个分类区块有唯一 ID（如 category-1），左侧点击时传入该 ID 触发滚动：
- 右侧商品列表每个分类容器加
id="category-0"、id="category-1"等，确保 ID 可预测、不重复 - 左侧点击事件中，根据索引或数据标识生成目标 ID，再调用滚动方法
- H5 中避免用
scrollTop手动计算——不同机型缩放、字体渲染差异会导致偏移，scrollIntoView更可靠
滑动时动态匹配当前分类（靠位置区间而非像素硬编码）
右侧滚动时，不能只看 scrollTop 是否等于某个固定值，因为不同设备视口高度、字号、行高都不同。正确做法是：在页面渲染完成后，遍历每个分类容器，用 getBoundingClientRect() 获取其顶部距视口顶部的距离，存为区间数组，如 [0, 248, 512, 796]：
- 每次滚动触发时，取当前
scrollTop，遍历区间数组，找到它落在哪一段（比如 320 ∈ [248, 512)），就激活对应索引的左侧项 - 区间数组必须在
setData（小程序）或requestAnimationFrame（H5）回调中计算，确保 DOM 已渲染完毕 - 为防快速滚动漏判，建议节流处理滚动事件（间隔 ≥ 16ms），并增加容错偏移量（±20px）
响应式布局下保持左右宽度比例稳定
移动端横竖屏切换、小屏手机（如 iPhone SE）和大屏折叠屏都要正常显示。左侧分类栏不能写死 px 宽度：
立即学习“前端免费学习笔记（深入）”；
- 用 flex 布局：左侧设
flex: 0 0 80px（最小宽度 80px，不伸缩），右侧flex: 1占满剩余空间 - 小屏（≤375px）可改为
flex-direction: column，分类栏置顶，菜单区在下方，仍保持联动逻辑不变 - 禁止给分类项设固定高度，用
min-height+align-items: center防止文字换行错位
触控优化：防止误操作与反馈延迟
手指滑动快、点击区域小、页面重绘慢，都会破坏联动体验：
- 左侧分类项用
<button type="button"></button>而非<div>，确保可聚焦、可按压反馈、无障碍支持 <li>右侧滚动容器加 <code>touch-action: pan-y，禁用横向拖拽干扰，提升纵向滚动灵敏度 - 高亮状态用 CSS class 切换，不要内联 style；动画用
transition: background-color 0.2s，避免重排
