原文: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