zoukankan      html  css  js  c++  java
  • 移动端 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" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>移动端->弹出层内容滚动的时候,不影响body的滚动条处理</title>
    <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 class="layerNode">
            <p>弹出层 start</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>弹出层 end</p>
        </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');
    
        </script>
    </body>
    </html>
  • 相关阅读:
    【最短路】The 2019 Asia Nanchang First Round Online Programming Contest Fire-Fighting Hero (Dijkstra)
    【积累】The 2019 Asia Nanchang First Round Online Programming Contest The Nth Item (矩阵快速幂 k进制快速幂)
    【线段树】The Preliminary Contest for ICPC Asia Xuzhou 2019 Colorful String(回文树+线段树+状压/bitset)
    allure参数说明及代码示例
    Idea+maven+testng+reportng生成测试报告
    ubuntu 16.04 镜像下载
    new AndroidDriver报错java.lang.NoSuchMethodError: com.google.common.base.Throwables.throwIfUnchecked
    Appium常用的API
    Appium常用的定位方法
    adb 指令总结
  • 原文地址:https://www.cnblogs.com/zion0707/p/5452214.html
Copyright © 2011-2022 走看看