H5方法:
//吸顶头部
.header{
width:100%;
height:50px;
position:fixed;
top:0px;
}
//main滑动区域
.main{
width:100%;
height:auto;
position:absolute;
padding-top:50px;
padding-bottom:50px;
box-sizing:border-box;
overflow-y:scroll;
}
//吸底尾部
.footer{
width:100%;
height:50px;
position:fixed;
bottom:0px;
}
ios原生方法:
前端开发人员会在app中打开webview,这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动,整个viewport跟着动,所以可以在生成schema的时候将参数bounce_disable(可能不一定都有这个参数,就看有没有类似的参数进行控制)设置为1禁止native的弹性效果,然后加上h5的这个效果,-webkit-overflow-scrolling 属性可以帮我们实现这个效果,它控制元素在移动设备上是否使用滚动回弹效果。
IOS中position:fixed吸底时的滑动出现抖动的解决方案的更多相关文章
-
IOS中position:fixed弹出框中的input出现光标错位的问题
解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...
-
在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...
-
模拟出ios中流行的黑色背景底
[activityIndicatorView setBackgroundColor:[UIColor colorWithRed: green: blue: alpha:0.4]]; 用上面的语法,可以 ...
-
CSS中position:fixed的相关用法
CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...
-
CSS中position:fixed的用法
我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...
-
IE6中position:fixed无效问题解决
在做页面右下脚对话框时,直接使用position:fixed;大部分浏览器很容易就能做到,但是在IE6中却发现不行,原来是IE6不支持position:fixed;这个属性. 虽然用JS肯定能解决这个 ...
-
ie7中position:fixed定位后导致margin:0 auto;无效
布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...
-
css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
-
偏前端 - ios下position:fixed失效的问题解决
如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:f ...
随机推荐
-
使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
-
unity3d插件Daikon Forge GUI 中文教程5-高级控件listbox和progress bar的使用
3.3.listbox列表框 Atlas 图集: 下面应用到的精灵都是在这里的. ListBox中的内容: 背景精灵 图片的主颜色 Padding边距 Scrollbar 滚动条对象的预制体或者对象, ...
-
Android布局自定义Shap圆形ImageView,可以单独设置背景与图片
一.图片预览: 一.实现功能: 需求要实现布局中为圆形图片,图片背景与图标分开且合并到一个ImageView. 二.具体实现: XML中布局中定义ImageView, ...
-
vim 字符串替换整理
公司项目测试,要在vi编辑其中进行多路径修改,这时候用到了字符串替换的知识,在这里我自己整理了一下. 一.基本内容替换,无特殊符号 :s/old/new/ 替换当前行第一个 old 为 new ...
-
python的模块和包
==模块== python语言的组织结构层次: 包->模块->代码文件->类->函数->代码块 什么是模块呢 可以把模块理解为一个代码文件的封装,这是比类更高一级的封装层 ...
-
Docker折腾手记-linux下安装
Linux下的安装方法 博主用的是centos7,其它也是大同小异 我根据的是官网的教程进行的操作,地址是 https://docs.docker.com/engine/installation/li ...
-
linux 配置vim(vimrc)
打开终端:ctrl+alt+t 进入vim文件:cd /etc/vim 打开vimrc文件:sudo gedit vimrc 然后在行末if语句前加上下面的内容," 这个符号为注释,后面内 ...
-
dubbo 熔断,限流,降级
1 写在前面 1.1 名词解释 consumer表示服务调用方 provider标示服务提供方,dubbo里面一般就这么讲. 下面的A调用B服务,一般是泛指调用B服务里面的一个接口. 1.2 拓扑图 ...
-
python:win下将py文件打包成exe
[环境]windows,正常运行的python文件 1.安装pyinstaller ,cmd下执行以下命令,需看到安装成功界面 pip install pyinstaller 2.cmd中进入要打包的 ...
-
zip 的 压缩与解压
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xiananliu/article/details/23993481 zip格式是开源的相比rar格式 ...