關(guān)于移動(dòng)端js彈出層滾動(dòng)的時(shí)候 body層不可滾動(dòng)的解決辦法

發(fā)布時(shí)間：2020-07-11 07:03:13 來(lái)源：網(wǎng)絡(luò) 閱讀：1203 作者：Queen張小五欄目：開(kāi)發(fā)技術(shù)

最近在做移動(dòng)端網(wǎng)站，在點(diǎn)擊導(dǎo)航欄，彈出導(dǎo)航列表時(shí)，出現(xiàn)了問(wèn)題。下滑列表時(shí)底層body也跟著滾動(dòng)，連查帶想的折騰了兩天才解決這個(gè)問(wèn)題。下面主要分享一下解決辦法以及關(guān)鍵代碼。

一、有的網(wǎng)友建議彈出層彈出時(shí)給 html 和 body 都加上“height：100%；overflow：hidden；”，然而在手機(jī)上并沒(méi)有什么卵用

二、結(jié)合彈出層加上“overflow-y：auto”依然不起作用

。。。。

后來(lái)經(jīng)過(guò)網(wǎng)友的幫助，結(jié)合我的代碼終于找到了解決的辦法關(guān)于移動(dòng)端js彈出層滾動(dòng)的時(shí)候 body層不可滾動(dòng)的解決辦法

我的項(xiàng)目是用vue.js獲取的數(shù)據(jù)，請(qǐng)求數(shù)據(jù)部分的代碼就不放在這里了，核心代碼都已經(jīng)在這里了

關(guān)于移動(dòng)端js彈出層滾動(dòng)的時(shí)候 body層不可滾動(dòng)的解決辦法

代碼如下：

<!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>移動(dòng)端->彈出層內(nèi)容滾動(dòng)的時(shí)候，不影響body的滾動(dòng)條處理</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 自帶滾動(dòng)條不平滑解決方法 */

        }

    </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 ><a :href="getHref(item)">`item`.`name`</a></li>
                </template>
            </ul>
        </div>
</div>

<script type="text/javascript">

    //彈出層滾動(dòng)條不影響到body [layerNode：需要滾動(dòng)的元素]
    var DivScroll = function( layerNode ){
        //如果沒(méi)有這個(gè)元素的話，那么將不再執(zhí)行下去
        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;
                }
            }
            // 會(huì)阻止原生滾動(dòng)
            // return false;
        },false);

    }

    //調(diào)用
    var divScroll = new DivScroll('.layerNode');

    </script>
</body>
</html>

向AI問(wèn)一下細(xì)節(jié)

關(guān)于移動(dòng)端js彈出層滾動(dòng)的時(shí)候 body層不可滾動(dòng)的解決辦法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽