天天看點
傳回

移動端js彈出層滾動的時候 body層不可滾動的解決辦法

最近在做移動端網站，在點選導航欄，彈出導航清單時，出現了問題。下滑清單時底層body也跟着滾動，連查帶想的折騰了兩天才解決這個問題。下面主要分享一下解決辦法以及關鍵代碼。

一、有的網友建議彈出層彈出時給 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:;
            padding:;
        }
        body{
            height:px;
        }
        .mark{
            width:%;
            height:%;
            background:rgba(,,,.);
            position:fixed;
            left:;
            top:;
        }
        .layerNode{
            width:px;
            height:px;
            left:%;
            top:%;
            margin-left:-px;
            margin-top:-px;
            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 =  ;
        this.startY =  ;

        this.popupLayer.addEventListener('touchstart', function (e) {
            this.startX = e.changedTouches[].pageX;
            this.startY = e.changedTouches[].pageY;
        }, false);

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

            e.stopPropagation();

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

            // 隻能縱向滾
            if(Math.abs(deltaY) < Math.abs(deltaX)){
                e.preventDefault();
                return false;
            }

            if( this.offsetHeight + this.scrollTop >= this.scrollHeight){
                if(deltaY < ) {
                    e.preventDefault();
                    return false;
                }
            }
            if(this.scrollTop === ){
                if(deltaY > ) {
                    e.preventDefault();
                    return false;
                }
            }
            // 會阻止原生滾動
            // return false;
        },false);

    }

    //調用
    var divScroll = new DivScroll('.layerNode');
    //
    以下是我用vue.js擷取的清單資料部分代碼，就不展示了，核心代碼都在上面
    </script>
</body>
</html>

另外，如果清單滑動到最底部還是會引起body滾動時，可以給body加上一段css樣式：

{height:100%;position:fixed;top:0;}

,在關閉彈出層時，去掉這段樣式就可以了

效果圖如下：

移動端js彈出層滾動的時候 body層不可滾動的解決辦法
移動網站 js彈出層滾動 touchmove
上一篇: js計算div滑動距離
下一篇: 移動端元素拖拽之touchstart, touchmove,touchend簡易版本

繼續閱讀