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 ( ...
随机推荐
- 常用的OO设计原则
常用的OO设计原则: 1 封装变化:找出应用中可能需要变化之处,把它们独立出来,不要和哪些不需要变化的代码混在一起. 2 针对接口编程,而不是针对实现编程. 3 多用组合,少用继承. 4 松耦合:为了 ...
- Zabbix告警脚本-短信
[root@iot-svndata02 bin]# cat zbsms.sh #!/bin/sh #curl http://221.179.180.137:8080/smsaServer/lkSend ...
- JAVA中字符串操作几种方式对比
@参考文章 方法及原理: 方法1:a=a+b实际上另开辟一个空间c=a+b;然后将c的引用赋给a 方法2:a += b实际上是建立一个StringBuffer,然后调用append(),最后再将Str ...
- swift 需求: 导航栏和HeaderView 使用一个背景图片。
问题界面 需求: 导航栏和HeaderView 使用一个背景图片.解决方案: 让 导航栏 变成透明. override func viewWillAppear(_ animated: Bool) { ...
- eclipse 如何安装freemaker ftl 插件
借鉴原链接 https://blog.csdn.net/lsygood/article/details/80565933 在线安装的方法是:Help –> Install New Softw ...
- vue-router 动态添加 路由
动态添加路由可以用了做权限管理.登录后服务器端返回权限菜单,前端动态添加路由 然后在设置菜单 1.vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则 ...
- Volatile 关键字 内存可见性
1.问题引入 实现线程: public class ThreadDemo implements Runnable { private boolean flag = false; @Override p ...
- python程序编写简介
语句和语法 # 注释 \ 转译回车,继续上一行,在一行语句较长的情况下可以使用其来切分成多行,因其可读性差所以不建议使用 : 将两个语句连接到一行,可读性差,不建议使用 : 将代码的头和体分开 语句( ...
- yii框架 隐藏index.php 以及美化URL(pathinfo模式访问)
首先我们分步骤来: 安装好 yii 以后 我们看到的url地址如下所示: http://www.3w.com/MyApp/backend/web/index.php?r=site%2Flogin 我 ...
- 大型互联网 b2b b2c o2o 电子商务微服务云平台
鸿鹄云商大型企业分布式互联网电子商务平台,推出PC+微信+APP+云服务的云商平台系统,其中包括B2B.B2C.C2C.O2O.新零售.直播电商等子平台. 分布式.微服务.云架构电子商务平台 java ...