Recently in the mobile site, when you click on the navigation bar, pop-up navigation list, there is a problem. Slide list When the bottom body also follow the scroll, even looking for a toss of the two genius to solve the problem. Here are the main solutions and key codes to share.
First, some users suggest that pop-up layer pop-up when the HTML and body are added "height:100%;overflow:hidden;", but there is no egg on the phone
Second, the combination of the pop-up layer plus "overflow-y:auto" still does not work
。。。。
Later after the help of netizens, combined with my code finally found a solution 650) this.width=650; "src=" Http://img.baidu.com/hi/jx2/j_0059.gif "alt=" j_0059.gif "/ >
My project is data obtained with Vue.js, the code of the request data section is not here, the core code is already here
650) this.width=650; "Src=" Http://s4.51cto.com/wyfs02/M02/8B/3F/wKiom1hHunmR7fwhAABuA2TB3nc096.png-wh_500x0-wm_3 -wmp_4-s_2203535407.png "title=" 4.png "alt=" Wkiom1hhunmr7fwhaabua2tb3nc096.png-wh_50 "/>
The code is as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no" >
<title> Mobile---Popup content scrolling, does not affect the body's scroll bar processing </title>
<script type= "Text/javascript" src= "Vue.js" ></script>
<script type= "Text/javascript" src= "Vue-resource.js" ></script>
<style>
*{
margin:0;
padding:0;
}
body{
height:1500px;
}
. mark{
width:100%;
height:100%;
Background:rgba (0,0,0,.5);
position:fixed;
left:0;
top:0;
}
. layernode{
width:200px;
height:200px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
Background-color: #fff;
Position:absolute;
Overflow-y:scroll;
-webkit-overflow-scrolling:touch; /* iOS comes with scroll bar not smoothing solution */
}
</style>
<body>
Body Layer
<div class= "Mark" >
<div id= "ul" v-show= "OK" >
<ul id= "menulist" class= "Layernode" >
<template v-for= "item in Message" >
<li style= "HEIGHT:46PX;" ><a:href= "Gethref (item)" >{{item.name}}</a></li>
</template>
</ul>
</div>
</div>
<script type= "Text/javascript" >
Pop-up scroll bar does not affect body [Layernode: element to scroll]
var divscroll = function (Layernode) {
If there is no such element, then it will not be executed.
if (!document.queryselector (Layernode)) return;
This.popuplayer = Document.queryselector (Layernode);
This.startx = 0;
This.starty = 0;
This.popupLayer.addEventListener (' Touchstart ', function (e) {
This.startx = E.changedtouches[0].pagex;
This.starty = E.changedtouches[0].pagey;
}, False);
Imitation Innerscroll method
This.popupLayer.addEventListener (' Touchmove ', function (e) {
E.stoppropagation ();
var deltax = E.changedtouches[0].pagex-this.startx;
var deltay = E.changedtouches[0].pagey-this.starty;
can only roll vertically
if (Math.Abs (DeltaY) < Math.Abs (deltax)) {
E.preventdefault ();
return false;
}
if (this.offsetheight + this.scrolltop >= this.scrollheight) {
if (DeltaY < 0) {
E.preventdefault ();
return false;
}
}
if (this.scrolltop = = = 0) {
if (DeltaY > 0) {
E.preventdefault ();
return false;
}
}
will prevent native scrolling
return false;
},false);
}
Call
var divscroll = new Divscroll ('. Layernode ');
</script>
</body>
This article from the "11484298" blog, reproduced please contact the author!
The solution to the non-scrolling of the body layer when the mobile JS pop-up layer scrolls
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
