zoukankan      html  css  js  c++  java
  • 移动端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{
    100%;
    height:100%;
    background:rgba(0,0,0,.5);
    position:fixed;
    left:0;
    top:0;
    }
    .layerNode{
    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>
    

      

  • 相关阅读:
    小程序云开发 -- 云函数定时触发器配置
    小程序echarts 构建中国地图并锚定区域点击事件
    微信小程序接入百度OCR(身份证识别)
    微信小程序开发技巧总结(三)-- 云开发时效数据刷新和存储 (access_token等)
    微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)
    微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载
    SpringBoot Jpa 自定义查询
    SpringBoot Jpa 分页查询最新配置方式
    【软工】提问回顾与个人总结
    【软工】[技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE
  • 原文地址:https://www.cnblogs.com/yuanye0918/p/10320280.html
Copyright © 2011-2022 走看看