记一个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 ...
随机推荐
- k8s dashboard 安装和证书更新
1.k8s 搭建 参见https://blog.51cto.com/lizhenliang/2325770 [root@VM_0_48_centos ~]# kubectl get cs NAME ...
- 五、Java控制流程
Java流程控制* 用户交互Scanner.Scanner进阶使用 用户交互Scanner 之前我们学习的基本语法中我们并没有实现程序和人的交互,但是Java给我们提供了这样一个工具类,我们可以获 ...
- git配置修改,git自定义命令,合并命令
一.自定义合并命令 将add commit push合并 git config --global alias.cmp '!f() { git add -A && git commit ...
- LGP3813题解
这道题是我去年11月份的时候看到的,当时写了一个假的做法没过样例,然后就没管了. 结果今天在模拟赛的时候放到了 T1( 我也不知道他为什么是对的,可是他就是过了样例和大样例.jpg 容易发现 \(n\ ...
- CF772D题解
什么阴间十进制状压 题意:给定 $ n $ 数字,求定义函数 $ G(x) $ 能够表示 满足"十进制按位与为 $ x $"的集合的平方和之和乘上 \(x\),求 \(\bigop ...
- LGP5493题解
卡完常后来造福一下人类 如何从4.80s卡到920ms.jpg 本题解的复杂度为 \(O(\frac {n^{3/4}} {\log n})\),然而标算是 \(O(\frac {n^{2/3}} { ...
- CF1476D题解
场上 \(O(n)\) 切掉的一道挺水的题. 首先向左走和向右走,一个很明显的结论是,如果向左走了一段距离又回到原点,那么方向是不会变的,所以只需要求出能够向左走的最远距离和向右走的最远距离,加起来即 ...
- vue项目部署到阿里云服务器(windows),Nginx代理!
项目构成: 前端:vue+vant-ui, 数据库:mysql, 后端:node.js 部署方式:nginx代理: 一,首先要拥有自己的服务器,阿里,腾讯都可以,我用的是阿里的: 如果只是做个人项目的 ...
- 用python生成你想要的任意大小文件
在测试的日常工作中,我们经常会需要测试上传文件的边界值.今天分享一段30行的简单代码,可以生成任意大小的文件,方便测试. file_size=input("请输入想要生成文件的大小:(单位M ...
- Linux企业常用命令详解
cat :查看 cat [-AbeEnstTuv] [--help] [--version] fileName 常用参数: -n :由 1 开始对所有输出的行数编号 -b :和 -n 相似,对于空白行 ...