An overview of the

Today, I encountered a rolling penetration problem when I was working on the mobile VUE project. After looking up information on the Internet, I selected the best method and recorded it for future study

You don’t have to scroll up

If the upper layer does not need to scroll, directly mask the upper layer touchMove event, as shown in the following example:

<div @touchmove.prevent> </div>Copy the code

The top layer needs to roll

If the upper layer needs to scroll, the sliding distance of the body should be obtained first when fixed, and then fixed with top to simulate the rolling distance. When not fixed, get the value of top and scroll the body back to where it was. The following is an example:

<template>
  <div @click="handleHambergerClick"></div>
</template>
<script>
export default {
  name: 'BaseHeaderMobile'.data() {
    return {
      isHeaderVisible: false}; },methods: {
    handleHambergerClick() {
      // hack: slide penetration problem
      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>
Copy the code