preface

PC system has been done before, now do mobile terminal also encountered some problems, this paper to solve the mobile terminal rolling dregs problem!

Global scroll

Global scrolling is scrolling over the body. If there is only one global scroll, there is no problem. The problem is that the page with global scroll pops up as shown below:

Scroll through – Fixed popover

When you click or slide on the popover, the global scroll of the bottom layer will also slide. When there was a problem, I also searched for a wave on the Internet and tried the following methods:

  1. Set overflow: Hidden for body when popover; (Cons: ios is useless)
  2. When popover, set the body to position: Fixed; (Cons: Scroll position lost, ios useless)

The perfect solution to this scenario is:

Add @touchmove.stop.prevent to the popover to prevent the Touchmove event from being passed to the body, which will solve the scrolling penetration problem.

Scroll through – scroll popover

Or this picture, the situation is that there is a rolling window!! If @touchmove.stop.prevent is used, this will solve the problem of scrollthrough. However, if @touchmove is blocked, it will not be able to scrollthrough itself

The perfect solution to this situation is: when the popover opens, set the position: Fixed property for the global scroll of the body, and set the top value; Since fixed is set, there is no scroll bar for the body when it pops up. If you do this, you will find that the body has no scroll penetration, but the original position is lost. So when setting the fixed property for the body, assign the current scroll position to the TOP property of the CSS, and there will be no visual change.

      fixedBody () {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        document.body.style.cssText += 'position:fixed; width:100%; top:-' + scrollTop + 'px; '
      }
Copy the code

So what happens when popovers close? Fixed and TOP should be cleared when the popover closes. And set its rolling position position top value, then restore the rolling function, and no visual changes, is the most perfect solution at present!

      looseBody () {
        let body = document.body
        body.style.position = ' '
        let top = body.style.top
        document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
        body.style.top = ' '
      }
Copy the code

conclusion

The above two solutions solve the influence of fixed popovers and scroll popovers on the global body scrolling. At the end of the article for VUE to do a custom instruction package.

Local rolling

Partial scrolling, again, in the popover, scrolling is fine on Android, but on ios partial scrolling is sometimes done.

Repeat steps:

  • ① From the rolling area from the top down
  • ② In the sliding rolling area, I found that the rolling actually failed!! Damn it…. This TM is still native. If you send it a few times, it will reappear.

Solution: Use the plugin Better scroll to study the document yourself.

Vue encapsulation

Vue:

Reported: {fixed: {// INSERTED When the bound element is inserted into the parentinserted () {
          let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
          document.body.style.cssText += 'position:fixed; width:100%; top:-' + scrollTop + 'px; '}, // called when the unbind directive unbinds an elementunbind () {
          let body = document.body
          body.style.position = ' '
          let top = body.style.top
          document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
          body.style.top = ' '}}},Copy the code

Custom directives use HTML:

<div  v-if="isShowRecordModal"v-fixed> .... . </div>Copy the code

The important thing about this directive is that you must use v-if to open the close popover, because this directive relies on DOM insertion and logout, and v-show is definitely not an option.

conclusion

The best time to plant a tree was ten years ago, followed by now.

Please give a thumbs up if it helps