1. Pull up and pull down the white background solution

Set the page to 100% height and overflow-y: scroll;

.wrap{
    width:100%;
    height:100%;
    overflow-y: scroll;
}
Copy the code

2. The keyboard pop-up view moves up, and there is a white block at the bottom after cancellation

Display :fixed;

.wrap{
    width:100%;
    height:100%;
    overflow-y: scroll;
    display:fixed;
    top:0;
    left:0;
}
Copy the code

If a button is clicked in the page, the event will be invalid because the position changes. Solution: execute window.scroll(0,0) after the input button loses focus to return the actual position of the page to the previous position using vue code

  HTML
  
  <input  @blur.prevent="getBlur()"></input>
  
  JS:
     getBlur(){
         window.scroll(0, 0);
      }
Copy the code

3. Prohibit bottom scrolling after modal eject layer

The outermost layer is set to 100 percent and scrolls at a fixed height

<div class="wrap">
    <div class="box"> XXX ... . XXX </div> </div> .wrap{ width:100%; height:100%; overflow:hidden; } .box{ height:1000%; overflow:scroll; }Copy the code

The scrolling part can be replaced by related plug-ins