onpagescroll 更适合详情页滚动监听，因其为页面级原生钩子，精度高、延迟低；bindscroll 依赖 scroll-view 配置且易失效，需节流、限幅、gpu 加速及跨端适配。
onPageScroll 比 bindscroll 更适合详情页滚动监听
商品详情页本质是整页滚动，不是局部区域滚动，onPageScroll 是页面级原生滚动钩子，不依赖 scroll-view 嵌套，拿到的 scrollTop 更准、延迟更低。而 bindscroll 在 scroll-view 上必须同时满足：scroll-y="true" + 父容器有固定高度 + iOS 需加 enhanced="true"，稍一遗漏就完全不触发。
常见错误现象：bindscroll 绑定后无反应、scrollTop 始终为 0、安卓端滚动卡顿跳动。
- pages.json 中对应页面不能配
"disableScroll": true - 如果页面包在 tabBar 或 subNVue 容器里，
onPageScroll会失效——此时只能退回到scroll-view+bindscroll，但务必加节流 - 低端 Android 机上
onPageScroll可能每秒只触发 10–20 次，直接绑定 transform 会丢帧，建议用 30ms 节流（如 lodash.throttle 或手写时间戳判断）
视差位移必须限幅，别用线性比例硬算
直接写 transform: translateY(${scrollTop * 0.5}px) 看似简单，实际会导致一滑就“飘”，松手回弹时抽搐严重。视差不是数学题，是体验控制：背景要“慢”，但不能滞后到脱离视觉锚点；前景要“跟”，但不能抖动抢戏。
推荐做法是分段限幅：
- 头部 banner 位移控制在 -60px ~ 0px 区间，超出部分截断（
Math.max(Math.min(-scrollTop * 0.3, 0), -60)） - 商品图缩放控制在 1.0 ~ 1.15 倍之间，避免放大失真
- 透明度变化范围建议 0.7 ~ 1.0，别让文字突然消失
- 所有 transform 动态计算后，统一加
translateZ(0)和will-change: transform，尤其安卓 WebView 必加，否则闪屏
导航栏分层响应要靠 scrollTop 区间判断，不是 CSS sticky
淘宝式导航栏不是简单吸顶，而是搜索框、分类入口、Logo 分三档响应：0–50px 模糊透明，50–100px 半透+淡入，100px+ 实体色+固定尺寸。这必须靠 onPageScroll 的 scrollTop 做 if-else 判断，CSS position: sticky 无法实现这种多级过渡。
关键细节：
- 每个状态切换点（如 50px、100px）建议设为常量，别写死数字，方便后续调整
- 过渡动画用
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)，比默认 linear 更自然 - iOS 微信中，
scrollTop可能带小数（如 50.32），做区间判断时用Math.floor或直接比较，别用严格相等 - 导航栏高度变化时，要同步更新页面内容的
padding-top，否则内容会上蹿
安卓低端机闪屏和 iOS 抖动必须针对性处理
视差效果在不同平台表现差异极大：安卓 WebView 渲染管线弱，容易闪屏；iOS Safari 对 transform 计算有延迟，滚动时抖动明显。这不是代码写错，是平台特性。
实操对策：
- 所有参与视差的元素加
style="transform: translateZ(0); will-change: transform;"，强制 GPU 加速（translateZ(0)是关键） - iOS 真机必开
enhanced="true"（仅对scroll-view有效），但onPageScroll无法开启，所以优先用 onPageScroll + 节流 + 少量 DOM 更新 - 避免在滚动回调里频繁调用
uni.createSelectorQuery()或操作大量 class，只更新 style 内联样式 - 测试时重点看红米 Note 9、iPhone SE（第二代）这类典型中低端机型，它们暴露的问题最真实
复杂点不在怎么写，而在怎么收——视差不是越夸张越好，而是要在「有层次感」和「不干扰阅读」之间找平衡点。多数人栽在第一步：把位移公式当真理，忘了用户真正需要的是“知道滚到哪了”，而不是“看到一个会跳舞的 banner”。
