Implementation of the scroll penetration problem of Vue project mobile terminal

Overview

Today, when I was working on the Vue mobile project, I encountered the problem of scrolling penetration. After searching the information online, I chose the best method I think, and recorded it for future development reference. I believe it will be useful to others.

No scrolling required on the upper layer

If the upper layer does not need to scroll, just block the touchmove event on the upper layer. Examples are as follows:

<div @>
I'm the content inside
</div>

The upper layer needs to be scrolled

If the upper layer needs to scroll, then when fixed, first get the sliding distance of the body, then use fixed to fix it, and use top to simulate the scroll distance; when not fixed, you can get the value of the top, and then let the body scroll to the previous place. Examples are as follows:

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

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

This is the end of this article about the implementation of the scroll penetration problem of the Vue project. For more related Vue mobile scroll penetration content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!