如何阻止FormBuilder组件被点击时触发页面自动滚动到顶部？

该问题是FormBuilder内置的焦点滚动对齐逻辑触发导致：checkbox、touchspin、radiobutton这类自定义组件在交互时会主动调用根元素的focus方法，触发了默认的scrollToFocusedInput逻辑，自动将组件滚动到视口顶部；而textfield、datepicker、dropdown这类原生控件的焦点逻辑和表单库适配兼容，因此不会出现异常跳转。

可通过以下几种方法解决：

• 全局关闭自动滚动配置（最推荐）
  绝大多数FormBuilder版本都提供了全局配置开关，初始化时将scrollToFocusedInput属性设为false即可彻底关闭该逻辑，示例如下：

  // 原生/JS版本FormBuilder初始化示例
  const form = new FormBuilder({
    // 其余原有配置项保留
    scrollToFocusedInput: false
  })
  

  如果你使用的是框架封装的FormBuilder（如Angular、React、Flutter版本），找到同名配置项修改为false即可。

• 针对异常组件单独拦截焦点事件
  若不需要全局修改，只需要给出现异常的三类组件绑定focus事件，阻止默认滚动行为即可：

  // 通用JS拦截示例
  const errorComponents = document.querySelectorAll(
    '.fb-checkbox, .fb-touchspin, .fb-radiobutton'
  )
  errorComponents.forEach(el => {
    el.addEventListener('focus', e => e.preventDefault())
  })
  

  框架环境下直接在对应组件的focus事件回调中执行preventDefault即可。

• 旧版本兼容补丁
  若你使用的FormBuilder版本未提供相关配置项，可以临时重写对应组件的focus方法，跳过非必要的焦点重定位逻辑，该方案为临时补丁不建议长期使用。

内容的提问来源于stack exchange，提问作者user3535244