使用aotearoan/angular-fullpage库时Chrome移动端下拉刷新冲突如何解决？

方案1：CSS属性禁用过度滚动（最优方案，代码量最小） #

直接在全局样式中添加以下代码，禁用Chrome移动端的默认过度滚动行为即可直接阻止下拉刷新触发：

html, body {
  overflow: hidden;
  overscroll-behavior: none;
}
/* 补充添加全屏滚动容器的样式 */
angular-fullpage {
  overscroll-behavior: none;
}

overscroll-behavior: none会完全禁用浏览器的滚动边界默认行为，包括下拉刷新、左右滑动页面前进后退等，完全不影响全屏滚动库的正常交互，兼容性支持Chrome 63+及所有主流移动端浏览器。

方案2：拦截触摸事件阻止默认行为 #

如果CSS方案不生效，可以通过Angular事件绑定拦截touchmove事件手动阻止默认行为：

1. 模板中为全屏滚动组件绑定touchmove事件：

<angular-fullpage [options]="yourOptions" (touchmove)="handleTouchMove($event)">
  <!-- 你的页面内容 -->
</angular-fullpage>

2. 组件类中添加事件处理方法：

handleTouchMove(e: TouchEvent) {
  // 若页面内没有需要单独滚动的子元素，直接阻止默认行为即可
  e.preventDefault();

  // 若存在需要内部滚动的子元素，添加判断逻辑排除即可，示例：
  // const target = e.target as HTMLElement;
  // if (!target.closest('.inner-scroll-content')) {
  //   e.preventDefault();
  // }
}

方案3：调整库配置项 #

修改angular-fullpage的初始化配置，开启默认行为拦截：

export class YourComponent {
  fullpageOptions = {
    // 保留你原有配置的基础上新增以下两项
    preventDefault: true,
    touchSensitivity: 8, // 可根据实际滑动体验调整，数值越小越难触发默认滚动
  }
}

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