移动端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>

  

原文地址:https://www.cnblogs.com/yuanye0918/p/10320280.html

时间: 2024-10-19 14:19:09

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

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

最近在做移动端网站,在点击导航栏,弹出导航列表时,出现了问题.下滑列表时底层body也跟着滚动,连查带想的折腾了两天才解决这个问题.下面主要分享一下解决办法以及关键代码. 一.有的网友建议弹出层弹出时给 html 和 body 都加上"height:100%:overflow:hidden:",然而在手机上并没有什么卵用 二.结合弹出层加上"overflow-y:auto"依然不起作用 .... 后来经过网友的帮助,结合我的代码终于找到了解决的办法 我的项目是用vu

移动端 js 弹出层内容滚动的时候,不影响body的滚动条处理

如标题所示,这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发,自己重写了一下代码 效果图: 代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport&quo

div+js 弹出层

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background

一个JS弹出层用户登录效果

<html> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>接触角测定仪 http://www.dgshengding.com</title> <style> body,#Mdown{margin: 0;padding: 0;text-align: center;font: n

Js弹出层,弹出框代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

移动端当弹出层显示,阻止body的滑动

很多时候前端在做移动端有弹出层的时候,滑动屏幕,body还是可以滑动,这些时候就要阻止,话不多说,直接看代码 首先定义一个变量,我这边定义的是stop=1,当弹出层显示,stop=0,然后监听touchmove事件,阻止冒泡和默认行为,这样效果就达到了. document.addEventListener("touchmove", function (e) { if (stop == 0) { e.preventDefault(); e.stopPropagation(); } },

很牛的js弹出层-artDialog4.1.2

[转]很牛的js弹出层-artDialog4.1.2 博客分类: javascript javascript 转自:http://www.iteye.com/topic/1117866 Sharpleo 写道 先让我们看看他提供的几种皮肤吧  功能: Java代码   1. 传入字符串 art.dialog({ content: '我支持HTML' }); 效果: Java代码   2. 传入HTMLElement 备注:1.元素不是复制而是完整移动到对话框中,所以原有的事件与属性都将会保留 2

JS弹出浮层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS弹出窗口代码大全(详细整理)

1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 复制代码代码如下: <html> <body 'http://www.jb51.net','脚本之家','channelmode');"