移动页面滚动穿透解决方案(荐)

移动页面滚动穿透解决方法目前有多种解决方案,我介绍下几种方案:

解决方案1:阻止冒泡。

//关键代码
$(".sliders,.modals").on("touchmove",function(event){
    event.preventDefault();
}); 

全部代码附上:


<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    head>
    <style type="text/css">
        .modals button{width:100%;margin:0 auto;height:auto;line-height:30px;border:1px solid #4185F3;color:#fff;font-size:14px;background:#4185F3;margin:0 auto}
        .modals-body{padding:30px 15px;font-size:10px;color:#666;text-align:center;background:#fff}
        .sliders{cursor:not-allowed;display:block;position:fixed;overflow:hidden;z-index:103;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(20,20,20,.8)}
        .modals{overflow-y:auto;max-height:95%;font-size:16px;z-index:103;border-radius:5px;background:#fff;width:50%;color:#333;display:block;box-shadow:0 0 3px rgba(0,0,0,.1);position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
    style>

    <body>
        
        <div class="sliders">div>
        <div class="modals">
            <div class="modals-body">
                用户信息丢失,请先登录
            div>
            <button class="btns">确定button>
        div>
        
        <div class="list">div>
    body>
    <script src="build/zepto.min.js">script>
    <script>

        for(var i = 0;i<=30;i++){
            $(".list").append("

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

"
); } //阻止防止滚动、缩放。 $(".sliders,.modals").on("touchmove",function(event){ event.preventDefault(); }); $(".btns").on("tap",function(){ $(".sliders,.modals").remove(); });
script> html>


解决方案2:通过 js 来做处理

首先,设置 body 元素 overflow:hidden 默认为隐藏。

body{overflow:hidden;}

其次,设置 JS ,再点击按钮之后,将body 的 overflow:initial 即可。

<script>

    for(var i = 0;i<=30;i++){
        $(".list").append("

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

"
); } $(".btns").on("tap",function(){ $(".sliders,.modals").remove(); //关键代码 $("body").css("overflow-y","initial"); });
script>


解决方案3:采用第三方插件 fastclick.js 来做处理

详情查阅:http://amazeui.org/1.x/javascript/modal/


你可能感兴趣的:(native嵌套H5的那些事儿)