移动页面滚动穿透解决方案(荐)
2023-04-18 14:43:34 时间
移动页面滚动穿透解决方法目前有多种解决方案,我介绍下几种方案:
解决方案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 来做处理
相关文章
- 盘点 iOS 工程 12 和安卓 9.0 相互学习了哪些特性
- 做小程序设计,不得不说的7个坑
- 这10条认知,可能就是你和大厂UI 设计师的差距
- 苹果发布iOS 12系统第七个开发者测试版
- iOS开发中runtime常用的几种方法
- 小程序洞察报告:传统品牌几大玩法、几大困惑都在这里了
- 3D成像技术来袭,金融科技将迎来哪些变革?
- 优雅快速的搭建iOS工程框架的探讨
- 拼命鼓吹5G手机的,不是傻就是坏
- 谷歌正式推出Android P第五个开发者预览版更新
- 假如安卓“无法保持免费”,谷歌能做些什么?
- iOS 内存管理:内存优化
- 谷歌“AI猜画”朋友圈刷屏:用户参与让它变得更聪明
- 一文读懂谷歌为何遭欧盟43亿欧元的创纪录罚款
- 超详细的登录注册的业务逻辑流程梳理
- 一次因代码走查引发的思维碰撞
- 手机到底是怎样泄密的?不知道的赶紧看看
- 技术变化那么快,程序员如何做到不被淘汰?
- 你可能会忽略的Git提交规范
- 程序员在代码审查时,遇到这样的领导是好是坏?