场景:

如下图所示,一个很正常的页面需求,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. codeforces 1041A Heist

    electronic a.电子的 heist v.抢劫 in ascending order 升序 indice n.标记 device n.装置设备 staff n.职员 in arbitrary ...

  2. week06 12 我们准备数据 前端调用rpc 前后端联调一下

    用postman发送请求 出现一个问题 我在return结果前 要将数据转换成字典 所以我们用json.dumps()后再json.load()回来 这样就避免了这个问题 因为数据结构的数据 比如li ...

  3. 基于maven构建javaweb项目思路梳理及改进

    需要准备的东西: Jdk. myeclipse. maven包 预装jdk环境 1.maven安装及配置: a)      详见url https://www.cnblogs.com/eagle668 ...

  4. javascript中的类型检测

    最常见的是使用 typeof 来判断数据类型 可以区分4种基本类型,即 “number”,”string”,”undefined”,”boolean”,第5种基本类型null类型返回值为object( ...

  5. 转载:轻量级Config文件AppSettings节点编辑帮助类

    using System.Configuration; using System.Windows.Forms; namespace Allyn.Common { public class XmlHep ...

  6. 54. Spiral Matrix以螺旋顺序输出数组

    [抄题]: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spi ...

  7. Eclipse常用快捷键(用到想到随时更新)

    原始链接:https://jingyan.baidu.com/article/fedf073771323235ac8977f1.html Shift+Enter在当前行的下一行插入空行(这时鼠标可以在 ...

  8. node.js中使用yargs来处理命令行参数

    yargs库能够方便的处理命令行参数. 一.安装 yargs npm install yargs --save 二.读取命令行参数 const yargs = require('yargs'); le ...

  9. python小练习1:设计这样一个函数,在桌面的文件夹上创建10个文本,以数字给它们命名。

    python小练习1:设计这样一个函数,在桌面的文件夹上创建10个文本,以数字给它们命名. 使用for循环即可实现: for name in range(1,11): desktop_path='C: ...

  10. django.template.exceptions.TemplateDoesNotExist: rest_framework/api.html

    django.template.exceptions.TemplateDoesNotExist: rest_framework/api.html setting文件中的 INSTALLED_APPS加 ...