Under normal circumstances, after the wechat browser page is pulled down, you can see a “this webpage is provided by XXXX”, because the page will be provided to a third party for use, so there is a requirement to hide the URL.

Because the pages are already there and there are many pages, the desired solution is a one-size-fits-all solution (at least 90% of the pages) without modifying the code for each page.

2019-09-11 16:43:48

Suddenly, I think I need an online DEMO, so that when I see this problem later, I can find out whether the solution of this article can really solve this problem.

Online DEMO address, click connect below. (If it cannot be opened, it may be because github Pages is deployed and blocked by wechat browser)

Zhongxia245. Making. IO/demo/pages /…

Full case source: Github here

Zero, one more thing

According to @true do not want to talk to students method, pro test effective, simple and crude.

You can use CSS to implement this requirement

body:before {
  width: 100%;
  height: 100%;
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  background: #fff;
}
Copy the code

Online case

Iphone7 IOS12 wechat browser, pro test effective, other devices have not been tested

A, thinking

To solve this problem, do a quick Google search and come up with the following conclusions.

1.1. Look at the wechat developer documentation

First of all, we need to check the documentation of wechat developers. JS SDK has methods that can be used to control the display and hiding of this website. Unfortunately, it does not provide such methods.

1.2. Prohibit touchMove scrolling

Since “the page provided by XXXX” is the page has been sliding to the top of the continue to pull down to appear, then prohibit the page pull down can not solve the problem, a piece of cake.

// Disable page scrolling
document.body.addEventListener('touchmove'.function(e) {
    e.preventDefault()
  }, false)
Copy the code

Too young too simple, the third parameter of the addEventListener method has compatibility problems.

function preventDefault(e) {
    e.preventDefault();
}

// Chrome 51, Firefox 49 or later
// Disable touch scrolling
document.addEventListener('touchmove', preventDefault, {passive: false});
// Restore touch scroll page
document.removeEventListener('touchmove', preventDefault, {passive: false});


// Chrome 51, Firefox 49 and below
document.addEventListener('touchmove', preventDefault, false);
document.removeEventListener('touchmove', preventDefault, false);
Copy the code

At this point in time, Chrome 78 is out, so this is what happens when you disable scrolling.

// Disable page scrolling
document.body.addEventListener('touchmove'.function(e) {
    e.preventDefault()
  }, {passive: false})
Copy the code

At this time, you will find that the page really can not pull down, then “the page provided by XXXX” not see it, perfect.

1.3. Body does not scroll. Only the div container needs to scroll inside

But the new problem, the page can not scroll, more than one screen of the page, can only see half, who can tolerate this. Therefore, we also need to solve the problem of page scrolling after banning TouchMove.

The react component renders a DOM node that supports scrolling.

let overscroll = function(el) {
  el.addEventListener('touchstart'.function() {
    let top = el.scrollTop
    let totalScroll = el.scrollHeight
    let currentScroll = top + el.offsetHeight
    //If we're at the top or the bottom of the containers
    //scroll, push up or down one pixel.
    //
    //this prevents the scroll from "passing through" to
    //the body.
    if (top === 0) {
      el.scrollTop = 1
    } else if (currentScroll === totalScroll) {
      el.scrollTop = top - 1
    }
  })
  el.addEventListener('touchmove'.function(evt) {
    //if the content is actually scrollable, i.e. the content is long enough
    //that scrolling can occur
    if (el.offsetHeight < el.scrollHeight) evt._isScroller = true
  })
}
overscroll(document.querySelector('#app'))
document.body.addEventListener(
  'touchmove'.function(evt) {
    console.log(evt._isScroller)
    //In this case, the default behavior is scrolling the body, which
    //would result in an overflow. Since we don't want that, we preventDefault.
    if(! evt._isScroller) { evt.preventDefault() } }, {passive: false})Copy the code

Only this js is still problematic, you need to set the height of #app and scroll beyond the length.

Because scrolling inside a DIV doesn’t work very well, there’s no elastic scrolling, so when your finger stops sliding, the page stops sliding. -webkit-overflow-scrolling: touch; Let’s add an elastic scrolling effect.

Here on Iphone7 IOS12, and oneplus 7 (should be this model) feel no problem, the experience is ok. But on the web, using this property can cause bugs.

#app {
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
Copy the code

1.4-webkit-overflow-scrolling: touch

To solve these problems, you can refer to this article, the article is more detailed, give the author a thumbs-up. Scrolling in Depth – WebKit-overflow-scrolling: Touch and ios.

A Bug is something that occasionally gets stuck or doesn’t slide.

Iphone7, IOS12, has not reappeared, do not know whether the specific phone and system version will have this problem.

The solution is to add height 1% or 1px to the next child of the Webkit-overflow-scrolling :touch attribute. The Scrollbar is actively triggered.

main:after {
    min-height: calc(100% + 1px)
}
Copy the code

Of course, occasionally getting stuck is just one of the problems, but there are many other bugs with this property, including but not limited to the following:

1. ScrollTop property does not change during scrolling

2. Gestures can trigger scrolling through other elements

3. Pause other transitions while scrolling

[Quote from the author of the article]

So for now, if you don’t want to bother, just go to iScroll or better Scroll, which I think works pretty well. If you prefer to slack off, -webkit-overflow-scrolling:touch is fine.

After all, the water is so deep on mobile that you never know if safari or X5 will be the next problem.

Two, to sum up

PC Web, the development of the most helpless pain is IE compatibility, now Mobile Web development, the most helpless pain of each Mobile phone compatibility problems. Compatibility is a pitfall of front-end development.

Solving one problem leads to more problems.

No code, no bugs.

The content of this article is about the following.

  1. To solve the drop-down display “This page is provided by XXXX”
  2. Use the Disable TouchMove scheme
  3. Specifying that a particular DIV element does not prohibit TouchMove scrolling allows the page to scroll
  4. Div internal scroll adds elastic scroll
  5. Learn about the bugs that elastic scrolling can cause

Finally, refer to the article

1. Wechat browser forbade page drop-down to view the URL (does not affect the internal scroll of the page)

Scrolling: Webkit-overflow-scrolling: ios

3, [Mobile New Features] Passive Event Listeners

4. Passive Event Listener

5. Disable and Restore touch Page Scrolling on mobile Terminal