微信小程序 disableScroll + 组件 scroll-view：三种滚动方案全部哑火

一个 C 端下单页，底部有用户协议勾选框，要求用户在点击提交前先滚动到末尾。功能听起来很简单——不就是 wx.pageScrollTo 一行代码的事？结果花了大半天，三套 API 挨个试了一遍，全部无效，且没有任何报错。

根因在两个配置的叠加：页面 JSON 里的 "disableScroll": true 加上把 <scroll-view> 封装进自定义组件的架构，让微信小程序里所有常规的程序化滚动手段同时失效。

现象

• 调用 wx.pageScrollTo({ scrollTop: 99999 })：页面纹丝不动，无报错
• 给 scroll-view 绑 scroll-into-view="{{targetId}}"：同样毫无反应
• 用 createSelectorQuery().node() 拿 ScrollViewContext 再调 .scrollTo()：在部分微信版本和真机调试下直接失效

根因

三种失效各有独立成因，叠在一起才形成了"全军覆没"的局面。

失效一：wx.pageScrollTo 操控的是原生页面滚动，而 disableScroll: true 把原生页面滚动整体禁掉了。 API 调用本身不出错，只是目标已经不存在。

// ❌ disableScroll: true 下，这行永远无效
wx.pageScrollTo({ scrollTop: 99999, duration: 300 });

失效二：scroll-into-view 按组件作用域查找 ID。 当 <scroll-view> 在子组件内部、页面内容通过 <slot> 注入时，slot 里的元素 ID 属于页面作用域，组件内的 scroll-view 看不到它们。

<!-- 自定义组件内部 WXML -->
<scroll-view scroll-into-view="{{scrollTarget}}">
  <slot></slot>  <!-- 页面内容插入这里，但 ID 归属页面作用域 -->
</scroll-view>

// ❌ scroll-view 在自己的组件域里找 'my-anchor'，永远找不到
this.setData({ scrollTarget: 'my-anchor' });

失效三：ScrollViewContext.scrollTo() 在组件嵌套上下文里行为不稳定。 通过 selectComponent 拿到子组件后再 createSelectorQuery().node() 获取 context，在不同微信版本和调试工具下结果不一致，不能依赖。

正解

技术修复：给滚动容器组件加 scrollTo 方法

如果确实需要其他场景的程序化滚动，在封装 scroll-view 的组件内部暴露一个方法，让查询在组件自己的作用域里进行：

// scroll-container/index.js
Component({
  methods: {
    scrollTo(top, animated = true) {
      this.createSelectorQuery()
        .select('.scroll-wrap')  // 组件内部类名，作用域匹配
        .node()
        .exec((res) => {
          if (res[0] && res[0].node) {
            res[0].node.scrollTo({ top, animated });
          }
        });
    }
  }
})

页面调用时通过 selectComponent 拿到组件实例再调该方法，不再跨越作用域边界。

产品级逃生方案（推荐）

当滚动目标是用户操作的前置条件时（如"同意协议才能提交"），最优解不是让用户滚过去，而是把这个元素挪到始终可见的位置。

把协议勾选框从内容区移到底部固定操作栏，放在提交按钮正上方：

┌───────────────────────────────┐
│  ☐ 我已阅读并同意《用户协议》    │  ← 始终可见
│  ┌─────────────────────────┐  │
│  │      确认并提交          │  │  ← 操作按钮
│  └─────────────────────────┘  │
└───────────────────────────────┘

这样用户不需要滚动，协议状态始终在视野内，体验更直接。实现上只需把底部按钮组件升级成支持可选协议行的版本：

// 组件 properties
agreementText: { type: String, value: '' },   // 空字符串 = 不显示协议行
agreementLinks: { type: Array, value: [] },
isAgreed: { type: Boolean, value: false },

一句话外卖

disableScroll: true + 组件化 scroll-view 是个无声的死胡同——排查前先确认架构，再选 API，跨作用域的 ID 查找永远不可靠。