移动端js弹出层滚动的时候 body层不可滚动的解决办法

Posted 小、野

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端js弹出层滚动的时候 body层不可滚动的解决办法相关的知识，希望对你有一定的参考价值。

原文：https://blog.csdn.net/queenzjl/article/details/53507661 

 

一、有的网友建议弹出层弹出时给 html 和 body 都加上“height：100%；overflow：hidden；”，然而在手机上并没有什么卵用

二、结合弹出层加上“overflow-y：auto”依然不起作用

三、加上touchmove事件：window.ontouchmove = function(e){e.preventDefault();return false;},结果整个屏幕都无法滑动，这个办法也不行

后来经过网友的帮助，结合我的代码终于找到了解决的办法

 

代码如下：

<!DOCTYPE HTML>
<html>
<head>
<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>移动端->弹出层内容滚动的时候，不影响body的滚动条处理</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 自带滚动条不平滑解决方法 */

}

</style>
</head>
<body>


body层

<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">

//弹出层滚动条不影响到body [layerNode：需要滚动的元素]
var DivScroll = function( layerNode ){
//如果没有这个元素的话，那么将不再执行下去
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);

// 仿innerScroll方法
this.popupLayer.addEventListener(‘touchmove‘, function (e) {

e.stopPropagation();

var deltaX = e.changedTouches[0].pageX - this.startX;
var deltaY = e.changedTouches[0].pageY - this.startY;

// 只能纵向滚
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;
}
}
// 会阻止原生滚动
// return false;
},false);

}

//调用
var divScroll = new DivScroll(‘.layerNode‘);
//////////////////////////////////////////////
以下是我用vue.js获取的列表数据部分代码，就不展示了，核心代码都在上面
</script>
</body>
</html>

　　





以上是关于移动端js弹出层滚动的时候 body层不可滚动的解决办法的主要内容，如果未能解决你的问题，请参考以下文章

移动端在有弹出层时如何禁止底层的滚动

移动端弹出层之后禁用底部滚动条关闭回到原位置

移动端弹出层之后禁用底部滚动条关闭回到原位置

弹出层完美禁止页面滚动

移动端遮罩层滚动时，禁止底部滑动

移动端遮罩层滚动时，禁止底部滑动