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 ( ...
随机推荐
- codeforces 1041A Heist
electronic a.电子的 heist v.抢劫 in ascending order 升序 indice n.标记 device n.装置设备 staff n.职员 in arbitrary ...
- week06 12 我们准备数据 前端调用rpc 前后端联调一下
用postman发送请求 出现一个问题 我在return结果前 要将数据转换成字典 所以我们用json.dumps()后再json.load()回来 这样就避免了这个问题 因为数据结构的数据 比如li ...
- 基于maven构建javaweb项目思路梳理及改进
需要准备的东西: Jdk. myeclipse. maven包 预装jdk环境 1.maven安装及配置: a) 详见url https://www.cnblogs.com/eagle668 ...
- javascript中的类型检测
最常见的是使用 typeof 来判断数据类型 可以区分4种基本类型,即 “number”,”string”,”undefined”,”boolean”,第5种基本类型null类型返回值为object( ...
- 转载:轻量级Config文件AppSettings节点编辑帮助类
using System.Configuration; using System.Windows.Forms; namespace Allyn.Common { public class XmlHep ...
- 54. Spiral Matrix以螺旋顺序输出数组
[抄题]: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spi ...
- Eclipse常用快捷键(用到想到随时更新)
原始链接:https://jingyan.baidu.com/article/fedf073771323235ac8977f1.html Shift+Enter在当前行的下一行插入空行(这时鼠标可以在 ...
- node.js中使用yargs来处理命令行参数
yargs库能够方便的处理命令行参数. 一.安装 yargs npm install yargs --save 二.读取命令行参数 const yargs = require('yargs'); le ...
- python小练习1:设计这样一个函数,在桌面的文件夹上创建10个文本,以数字给它们命名。
python小练习1:设计这样一个函数,在桌面的文件夹上创建10个文本,以数字给它们命名. 使用for循环即可实现: for name in range(1,11): desktop_path='C: ...
- django.template.exceptions.TemplateDoesNotExist: rest_framework/api.html
django.template.exceptions.TemplateDoesNotExist: rest_framework/api.html setting文件中的 INSTALLED_APPS加 ...