记一个ios滚动穿透问题
直接上代码
<body style="overflow: hidden;-webkit-overflow-scrolling: touch;">
<div id="view" style="position: relative;">
<div id="scrollview" style="position: absolute;top: 0;bottom: 0;left: 0; width: 100%;background: #f7f7f7;overflow: auto;">
<div style="background-color: red;width: 50px;height: 300px;">1</div>
<div style="background-color: gray;width: 50px;height: 300px;">2</div>
<div style="background-color: green;width: 50px;height: 300px;">3</div>
</div>
</div>
<div id="model" style="position: fixed;bottom: 0; height: 300px;left: 0;width: 100%; background-color: gold;overflow: auto;z-index: 10;-webkit-overflow-scrolling: auto;">
<div style="background-color: skyblue;width: 100px;height: 300px;">1</div>
<div style="background-color: gray;width: 100px;height: 300px;">2</div>
<div style="background-color: green;width: 100px;height: 300px;">3</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$('#view').height($(window).height());
</script>
复现2个条件
1、body或者view的-webkit-overflow-scrolling为touch
2、model的-webkit-overflow-scrolling为auto
当滚动model块到底时接着滑动会出现scrollview跟随滚动(不涉及click问题),
android上未出现这个问题
记一个ios滚动穿透问题的更多相关文章
- 弹层蒙版(mask),ios滚动穿透,我们项目的解决方案
问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...
- 一个事件一定时间内只允许点击执行一次 与 vue阻止滚动穿透
可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变 篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime ...
- iOS开发:一个无限滚动自动播放图片的Demo(Swift语言编码)
很久以前就想写这么一个无限滚动的Demo了,最近学习了下Swift,手中没有可以用来练手的Demo,所以才将它实现了. Github地址(由于使用了UIView+AutoLayout第三方进行布局,所 ...
- 【JS】341- 移动端滚动穿透的6种解决方案
前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...
- 超强教程:如何搭建一个 iOS 系统的视频直播 App?
现今,直播市场热火朝天,不少人喜欢在手机端安装各类直播 App,便于随时随地观看直播或者自己当主播.作为开发者来说,搭建一个稳定性强.延迟率低.可用性强的直播平台,需要考虑到部署视频源.搭建聊天室.优 ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- 设计一个 iOS 控件
转载自:http://blog.csdn.net/zhangao0086/article/details/45622875 代码的等级:可编译.可运行.可测试.可读.可维护.可复用 前言 一个控件从外 ...
- 从安装Mac OS X虚拟机到第一个IOS程序
对于纯粹地抄这种行为是比较抵触的,别人已经写得挺好的东西没必要又去写一遍,但如果不写经验来看下次再做时自己又要重复百度筛选一遍,所以还是要记一记. 之前要获取IOS静态库的版本,但一直以来没有Mac没 ...
- js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。
背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...
随机推荐
- 矩池云上使用nohup和&让任务后台运行
1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup ...
- Mock平台2-Java Spring Boot框架基础知识
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 认识Spring Boot 在N年前的大学时代想要开发一个Web服务使用的还是SSH框架(struts+spring+hibernate) ...
- 借助DBHelper实现学生管理案例分析
一.案例功能的实现 数据: --专业 create table ProfessionInfo ( ProfessionID int primary key identity(1,1), --专业编号 ...
- mybatis crud 学习总结02
1.db.properties 原因:数据库的连接直接写到配置(mybati-config.xml)里存在安全隐患 解决:将配置的信息放到一个文件中管理 右键resources --> File ...
- WAF绕过的各种姿势
主要思路: 根据WAF部署位置,针对WAF.WEB服务器.WEB应用对协议解析.字符解析.文件名解析.编码解析以及SQL语法解析的差异,绕过WAF,将payload送至服务器执行. 常用绕过方法: 1 ...
- [happyctf]部分writeup
题目名称:sqltest所属:MISC考察点:盲注 眼力 耐心(好吧是废话) 附件下载下来 ,到手一个流量包,用wireshark打开,大致浏览了一下,抓的应该是盲注的数据流量. 这里有一个经验问题, ...
- Netty之DefaultAttributeMap与AttributeKey的机制和原理
一.介绍和原理分析 1.什么是 DefaultAttributeMap? DefaultAttributeMap 是一个 数组 + 链表 结构的线程安全Map. 2.什么是 AttributeKey? ...
- MySQL—存储引擎
主要包括两大引擎 MyISAM,InnoDB 1.MyISAM与InnoDB的区别 2.常规的使用操作 1.MyISAM 节约空间,速度快 2.InnoDB 安全性高,事务的处理,多表操作.Inno ...
- 有标号DAG计数(生成函数)
有标号DAG计数(生成函数) luogu 题解时间 首先考虑暴力,很容易得出 $ f[ i ] = \sum\limits_{ j = 1 }^{ i } ( -1 )^{ j - 1 } \bino ...
- 突发!Gitee 图床,废了!
大家好,我是鱼皮,这两天又发生了一件挺意外的事情:Gitee 的图床废了! 图床:指储存图片的服务器,便于在网上展示图片 昨天晚上,星球里不止一位小伙伴发帖子表示自己网站.文章中的图片竟然全部变成了 ...