文档章节

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

壹峰
 壹峰
发布于 2018/12/19 14:46
字数 489
阅读 9
收藏 0

 

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

解决方案1:阻止冒泡。

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

全部代码附上:

<!DOCTYPE html>
<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>
        <!--end-->
        <div class="list"></div>
    </body>
    <script src="build/zepto.min.js"></script>
    <script>

        for(var i = 0;i<=30;i++){
            $(".list").append("<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>");
        }

        //阻止防止滚动、缩放。
        $(".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("<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>");
    }

    $(".btns").on("tap",function(){
        $(".sliders,.modals").remove();

        //关键代码
        $("body").css("overflow-y","initial");

    });

</script>



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


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


--------------------- 
作者:Rkatsiteli 
来源:CSDN 
原文:https://blog.csdn.net/qq_16559905/article/details/51333335 
版权声明:本文为博主原创文章,转载请附上博文链接!

 

 

 

本文转载自:https://blog.csdn.net/qq_16559905/article/details/51333335 

共有 人打赏支持
壹峰
粉丝 7
博文 579
码字总数 9582
作品 0
广州
其他
私信 提问
移动端Modal组件开发杂谈

Vant 是有赞开发的一套基于的组件库,在开发的过程中也踩了很多坑,今天我们就来聊一聊开发一个移动端Modal组件(在有赞该组件被称为)需要注意的一些。 在任何一个合格的UI组件库中,组件应...

2017/12/20
0
0
Vue.js 移动端 Web App 点击穿透问题解决方案

描述 在近期的一个移动端项目中,有一个页面需要有弹框提示,并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动,在 iScroll 的配置当中把 和 事件都开启了。 代码如...

沉迷学习中
2018/05/18
0
0
前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案

相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和ios...

大灰狼的小绵羊哥哥
2018/09/13
0
0
移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方
2017/12/26
0
0
ntv.js框架源码解读 - 4navigation.js

4navigation.js源代码: ntv.navigation类,处理页面焦点移动和确认、刷新等操作动作。 在讲解框架处理焦点移动前,先讲解下机顶盒上焦点移动的工作原理,以便开发者能更好的了解框架采用这种...

coton_chen
2015/04/29
0
4

没有更多内容

加载失败,请刷新页面

加载更多

Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
1
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部