vue解決ios橡皮筋回彈！ 禁止ios滑動回彈效果和安卓炫光效果

第一種方法：

通過監聽 touchmove 事件：當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件可以阻止滾動。

// 禁止頁面滾動
    var forbidScroll = function (e) {
      e.preventDefault();
    };
    // 通過 $once 來監聽生命周期 beforeDestroy 鈎子
    this.$once("hook:beforeDestroy", () => {
      body.removeEventListener("touchmove", forbidScroll);
    });
    //函數調用
    function forbidTouchMove() {
      document.body.style.overflow = "hidden";
      body.addEventListener("touchmove", forbidScroll, { passive: false });
    }
    forbidTouchMove();
           

方法二：

可以使用css新屬性overscroll-behavior

body {

overscroll-behavior-y: none;

}

但是需要浏覽器支援該屬性

方法三：

可以使用插件inobounce（但是隻适用于ios系統，安卓不适用）

官網：https://github.com/lazd/iNoBounce

在vue中：

//先下載下傳npm install inobounce -s

//然後在script中：

<script>
import inobounce from 'inobounce'
export default {
  data() {
    return {  }
  },
  mounted() { },
  created() {
    let u = navigator.userAgent
    if (u.indexOf('iPhone') > -1) {
      inobounce.enable()
    }
  },
  beforeDestroy() {
    inobounce.disable()
  },
  methods: { }
}
</script>