场景:

如下图所示,一个很正常的页面需求,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失效问题的更多相关文章

  1. ios webview下纯JS实现长按

    app,其中有长按LI列表弹出菜单,只要清楚五个方法就行:ontouchstart.ontouchmove.ontouchend.setTimeout.clearTimeout 1.首先在我们按下手指 ...

  2. 安卓webview下使用zepto的swipe失效

    安卓webview下使用zepto的swipe遇到的坑 众所周知,安卓手机上touch事件一直有各种各样莫名其妙的问题. 比如,我想要用swipeLeft/swipeRight监听向左向右滑动事件,如 ...

  3. vue router 修改title(IOS 下动态改变title失效)

    在ios下app  设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加   ...

  4. ios端position为fixed失效的解决办法

    关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...

  5. 苹果IOS下text-shadow与box-shadow失效的解决办法

    加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none

  6. ios客户端浏览器样式加载失效问题

    最近线上测试中出现一个奇怪的问题,ios客户端浏览器样式加载失效. 从表象来看,同样的css,安卓手机上可以正常展示,但是到ios手机上首次进入页面就不能正常显示 这时候,我们首先会考虑是不是ios设 ...

  7. iOS Webview 实现修改javascript confirm 和 alert

    贴代码: @interface UIWebView (JavaScriptAlert) -(void) webView:(UIWebView *)sender runJavaScriptAlertPa ...

  8. IOS webView学习

    本文简单介绍下在IOS中,webView的基本用法,也顺便强化下自己的基础知识----天明少羽爬楼梯 一.加载外部HTML 显示webView 报错:NSURLSession/NSURLConnect ...

  9. IOS 开发下拉刷新和上拉加载更多

    IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh ( ...

随机推荐

  1. elasticsearch-权威指南笔记-基础部分

    参考这里的文档es权威指南 话说这个坑爹的文档是2.x版本的es,英文版本也是,所以就没啥好抱怨的了. 官方教程中有很多坑 例如,需要启动text上的索引. 还有就是get这个是不能带json的,所以 ...

  2. Linux下chkconfig命令介绍

    一.引论 chkconfig命令检查.设置系统的各种服务.这是Red Hat公司遵循GPL规则所开发的程序,它可查询操作系统在每一个执行等级中会执行哪些系统服务, 其中包括各类常驻服务.谨记chkco ...

  3. 微信小程序---人脸识别(wx.startFacialRecognitionVerify)

    1.由于人脸核验功能涉及到用户的敏感.隐私信息,因此调用此接口的业务方,需要满足一定的条件,申请小程序的人脸识别api.开通小程序后台的接口权限入口后,开发者可以登录mp.weixin.qq.com小 ...

  4. 图像的几何变换——OpenCV-Python Tutorials

    原文地址http://opencv-python-tutroals.readthedocs.io/en/latest/py_tutorials/py_imgproc/py_geometric_tran ...

  5. 安装Python-Jenkins

    有两种方式安装: ①有网络:sudo pip install python-jenkins ②无网络: 下载文件:https://pypi.org/project/python-jenkins/#fi ...

  6. Codeforces Round #449 (Div. 2)

    Codeforces Round #449 (Div. 2) https://codeforces.com/contest/897 A #include<bits/stdc++.h> us ...

  7. TZOJ 4602 高桥和低桥(二分或树状数组+二分)

    描述 有个脑筋急转弯是这样的:有距离很近的一高一低两座桥,两次洪水之后高桥被淹了两次,低桥却只被淹了一次,为什么?答案是:因为低桥太低了,第一次洪水退去之后水位依然在低桥之上,所以不算“淹了两次”.举 ...

  8. python note 05 字典及其操作

    1. '''#数据类型划分:可变数据类型,不可变数据类型不可变数据类型:元组,bool int str 可哈希可变数据类型:list,dict set 不可哈希dict key 必须是不可变数据类型, ...

  9. 515. Find Largest Value in Each Tree Row查找一行中的最大值

    [抄题]: You need to find the largest value in each row of a binary tree. Example: Input: 1 / \ 3 2 / \ ...

  10. 如何禁用Chrome / Firefox /IE浏览器的Cookie

    Firefox: 点击菜单按钮并点击选项 按钮. 选择 隐私 面板. 将“Firefox 将会:”这一项设置为 使用自定义历史记录设置. 取消 接受来自站点的 Cookie 选项 即可禁用 Cooki ...