ios webview下footer部分fixed失效问题
场景:
如下图所示,一个很正常的页面需求,footer固定在底部,中间为滚动内容区

然后footer的css一般是这样的
footer{
position:fixed;
bottom:;
left:;
width:100%;
``````
}
实测chrome下没毛病,ios微信浏览器打开也没毛病,但是!!!
在ios给我们开的webview里面,这个footer部分开始“跑”了,
具体情况是,footer在页面滑动的时候也跟着滑动了,等滑动完毕,
footer部分又自动“归位”了,锁定到了底部。是不是很诡异 ···
就IOS的webview有这毛病,
然后就摸索了一个解决方案是把整个body固定高度(屏幕高度),
然后padding-bottom:(footer的高度)。
footer的css就用absolute,定在底部了。
上面的主内容区就overflow-y:scroll;
然后记得在这里加上-webkit-overflow-scrolling: touch;
为了让你在ios上流畅滚动的。
避免使用fixed
ios webview下footer部分fixed失效问题的更多相关文章
- ios webview下纯JS实现长按
app,其中有长按LI列表弹出菜单,只要清楚五个方法就行:ontouchstart.ontouchmove.ontouchend.setTimeout.clearTimeout 1.首先在我们按下手指 ...
- 安卓webview下使用zepto的swipe失效
安卓webview下使用zepto的swipe遇到的坑 众所周知,安卓手机上touch事件一直有各种各样莫名其妙的问题. 比如,我想要用swipeLeft/swipeRight监听向左向右滑动事件,如 ...
- vue router 修改title(IOS 下动态改变title失效)
在ios下app 设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加 ...
- ios端position为fixed失效的解决办法
关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...
- 苹果IOS下text-shadow与box-shadow失效的解决办法
加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none
- ios客户端浏览器样式加载失效问题
最近线上测试中出现一个奇怪的问题,ios客户端浏览器样式加载失效. 从表象来看,同样的css,安卓手机上可以正常展示,但是到ios手机上首次进入页面就不能正常显示 这时候,我们首先会考虑是不是ios设 ...
- iOS Webview 实现修改javascript confirm 和 alert
贴代码: @interface UIWebView (JavaScriptAlert) -(void) webView:(UIWebView *)sender runJavaScriptAlertPa ...
- IOS webView学习
本文简单介绍下在IOS中,webView的基本用法,也顺便强化下自己的基础知识----天明少羽爬楼梯 一.加载外部HTML 显示webView 报错:NSURLSession/NSURLConnect ...
- IOS 开发下拉刷新和上拉加载更多
IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh ( ...
随机推荐
- linux 权限之acl
查看分区ACL权限是否开启 centos 6 dumpe2fs -h /dev/sda1(是查看ext2/ext3/ext4 文件系统信息的命令) centos 7 xfs_growfs /dev ...
- 初学JSON和AJAX心得透过解惑去学习
虽然复制代码再改参数,也能正常运作.但是看懂里面语法,就可以客制成适合你自己程序.例如录制Excel巨集,会有一些赘句,这时候整合就是很重要工作. [大纲] 时间分配 AJAX Markdown教学及 ...
- 《深入理解JAVA虚拟机》----------第二章 JAVA内存区域与内存溢出异常,笔记(下)
2. HotSpot虚拟机对象探秘 2.1 对象的创建 虚拟机遇到一条New指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初 ...
- TZOJ 3820 Revenge of Fibonacci(大数+trie)
描述 The well-known Fibonacci sequence is defined as following: Here we regard n as the index of the F ...
- nignx知识点总结
https://segmentfault.com/a/1190000013781162
- APIView流程——请求方式分发
- jmeter 如何发送上传文件接口请求
1.上传图片接口,通过抓包工具获取接口相关信息,然后在信息头里添加Content-Disposition:form-data; name="imgType" 2.在请求中MIME类 ...
- Python开发——数据类型【字符串】
字符串定义 字符串是一个有序的字符的集合,用于存储和表示基本的文本信息 在Python中加了引号的字符,都被认为是字符串! 单引号.双引号.多引号之间的区别? 答案:单双引号没有区别 多引号的作用? ...
- 设置angular公共样式表
一.现象 新创建的项目,是直接显示在src目录下的,假如会用到其它第三方的全局样式时,不能统一放在一个地方统一来管理,就会感觉有点乱. 二.解决 1.移动样式表. 在assets文件夹(该文件夹一般都 ...
- Fabric的权限管理:Attribute-Based Access Control
之前稍微了解过Client Identity Chaincode Library,这几天正好开始实际应用. 虽然了解过,还是发现了不少之前理解的不足,也踩了不少坑. 先列出官方介绍: https:// ...