Vueプロジェクトの移動端の転がりは問題の実現を貫きます。

概要
今日はVueモバイル端末のプロジェクトをしていますが、スクロールスルーの問題がありました。インターネットで資料を調べた後、一番いい方法を選びました。記録してから開発する時に参考にしてください。他の人にも役に立つと信じています。
上の部分はスクロールする必要がありません
上層部がスクロールする必要がないなら、上層部のtouchmoveイベントを直接遮断すればいいです。例は以下の通りです

<div @touchmove.prevent>
       
</div>

上の方はスクロールが必要です
上の層がスクロールする必要があるなら、固定する時はまずbodyのスライド距離を取って、fixedで固定して、topでスクロール距離をシミュレーションします。固定しない場合はtopの値を取得し、bodyを前の場所にスクロールさせるだけでいいです。例は以下の通りです

<template>
 <div @click="handleHambergerClick"></div>
</template>
<script>
export default {
 name: 'BaseHeaderMobile',
 data() {
  return {
   isHeaderVisible: false,
  };
 },
 methods: {
  handleHambergerClick() {
   // hack:       
   if (!this.isHeaderVisible) {
    this.lockBody();
   } else {
    this.resetBody();
   }

   this.isHeaderVisible = !this.isHeaderVisible;
  },
  lockBody() {
   const { body } = document;
   const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
   body.style.position = 'fixed';
   body.style.width = '100%';
   body.style.top = `-${scrollTop}px`;
  },
  resetBody() {
   const { body } = document;
   const { top } = body.style;
   body.style.position = '';
   body.style.width = '';
   body.style.top = '';
   document.body.scrollTop = -parseInt(top, 10);
   document.documentElement.scrollTop = -parseInt(top, 10);
  },
 },
};
</script>

ここで、Vueプロジェクトのモバイル端末のスクロール貫通問題の実現に関する記事を紹介します。Vueモバイル端末のスクロールが内容を貫いています。以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。