fixed定位兼容性
不过从ios5.1以来,fixed定位就已经支持了,但很遗憾,ios现在对它还只是半支持。
但是在某些情况下,会出现一些比较奇葩的问题,比如fixed元素中存在输入框子元素,这个时候就会跪了。
可以看到,fixed定位的元素跑到中间去了,这种问题一般出现在页面有scrollTop并且输入框获得了焦点的情况下!
怎么解决这种问题呢?我目前知道的主要有三种办法,假设HTML代码结构为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>fixed</title>
<style>
header {
position: fixed;
}
</style>
</head>
<body>
<header><input type="search" placeholder="请输入搜索词" /></header>
<div id="container"></div>
</body>
</html>
方法一
在输入框获得焦点时,将fixed改成absolute,并将top值设置为页面此时的scrollTop,然后在输入框失去焦点时,改回fixed。
function onFocus(e) {
this.main.style.position = 'absolute';
this.main.style.top = document.body.scrollTop + 'px';
}
function onBlur(e) {
this.main.style.position = 'fixed';
this.main.style.top = 0;
}
此外我们还得做一些额外的处理,比如禁止页面滚动,为啥要禁止滚动?
因为软键盘弹起的时候,用户还是可以滚动页面的,一旦用户往下滚动了页面,header也随着往下滚动了(因为此时它是absolute的)。
function onTouchMove(e) {
e.preventDefault();
e.stopPropagation();
};
function onFocus(e) {
this.main.style.position = 'absolute';
this.main.style.top = document.body.scrollTop + 'px';
document.body.addEventListener('touchmove', onTouchMove, false);
}
function onBlur(e) {
this.main.style.position = 'fixed';
this.main.style.top = 0;
document.body.removeEventListener('touchmove', onTouchMove);
}
这种方法基本能解决大部分需求,但是在输入框有搜索提示的时候也会挂,因为我们禁止了滚动,而搜索提示通常应该要能往下滚动。
方法二
在输入框的touchstart
事件发生时,将fixed元素改成static,然后再将焦点focus到输入框中,然后输入框blur时,再将其设置成fixed:
input.addEventListener('touchstart', function(e) {
main.style.position = 'static';
input.focus();
e.preventDefault();
}, false);
input.addEventListener('blur', function(e) {
main.style.position = 'fixed';
}, false);
这种方案的原理就是先将fixed元素改成static,这样该元素就会回到页面顶部(正常流),
然后调用输入框的focus方法,将焦点移到输入框中,此时页面视角也会跳到顶部。
Note: 优酷无线首页现在就是这么做的。
方法三
这种方案是将header和container都设置成absolute,然后只滚动container。
这种的方法主要依赖ios5.1以后提供的-webkit-overflow-scrolling
css属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>fixed</title>
<style>
header {
position: aboluste;
height: 45px;
width: 100%;
}
#container {
position: absolute;
top: 45px;
bottom: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch; }
</style>
</head>
<body>
<header><input type="search" placeholder="请输入搜索词" /></header>
<div id="container">
...
</div>
</body>
</html>
这种方案也有坑,主要表现在:当软键盘弹起时,用户一旦滚动界面,整个文档都会滚动(包括header、container),fixed的效果就没有了。
还有一个更深的坑就是,在软键盘弹起的时候,往上滚动页面,header此时也会随着往上滚,
然后收起软键盘,container居然滚动不了(手指多移动几次后,才能正常滚动)。
Note: 这个问题不知道什么原因,以后有发现再更新本文。
综上,我还是喜欢使用第二种方案。
苹果手机里微信不支持position:fixed;
怎么解决:搜索网络,看其他产品是怎么实现的;
解决链接:http://hushicai.com/2014/08/19/ios-fixed-ding-wei-wen-ti.html。
http://blog.csdn.net/liu__hua/article/details/40106595使用方法4。
fixed定位兼容性的更多相关文章
- 6s ios9.0平台 微信小程序的fixed定位兼容性问题
如果不设置top和left的话 就会出现不显示问题
- 【原】IOS兼容性之APP内fixed定位头部跳动
兼容现象: 在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本 ...
- 相对于父元素的fixed定位的实现
问题描述 之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元 ...
- 38.html----相对于父元素的fixed定位的实现
之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起 ...
- IE11下使用fixed定位时鼠标滚动不平滑
很久不用IE了,近期做兼容性测试发现一个fixed定位的问题,当元素使用fixed定位时,其应该不随页面滚动,在chrome/firefox/edge下都很完美,元素完全不动,但是使用IE11时,如果 ...
- web移动端input获得光标Fixed定位失效解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...
- fixed 定位 苹果手机输入框触发时内容全部隐藏
问题出现在东钿微信公众号用户注册页面 页面中只有两个输入框 页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了, ...
- 文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位
文件正在上传的转圈圈gif图片 一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验. <!--S 遮罩层 --> <div id="mas ...
- CSS fixed 定位元素失效的问题
一个示例 考察下面的代码: <head> <title>css filter issue</title> <style> body { height: ...
随机推荐
- jQuery源码分析-03扩展工具函数jQuery.extend
// 扩展工具函数 jQuery.extend({ // http://www.w3school.com.cn/jquery/core_noconflict.asp // 释放$的 jQuery 控制 ...
- Maven导出Project依赖的jar包
Maven导出Project依赖的jar包 从Maven仓库中导出jar包: mvn dependency:copy-dependencies 会导出到Project的targed/dependenc ...
- echarts 支持svg格式
今天研究了下echarts的svg格式.发现用ai生成svg格式的图片,echarts上面显示不了. 经过了多次的百度和谷歌终于找到了用Method Draw画出来的svg格式,echarts就能加载 ...
- Java Struts图片上传至指定文件夹并显示图片
继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="mult ...
- 版本管理工具Git(1)带你认识git
简介 本篇将带领大家认识,git.github,让大家对git有基本的认识:下面将持续更新几篇文章来介绍git,见git导航: 下一篇中将讲解git的安装及使用: Git系列导航 版本管理工具Git( ...
- 今天聊一聊nuxt.js(上)
背景 近期在做内部系统的重构,从一线业务彻底的重构,经过充分的考虑我们准备把这个项目打造成前台业务的试验站,比如ssr和一些其他的前沿技术的探索,积累充分的经验后待合适的契机应用到C端的项目中. 既然 ...
- cobbler无人值守批量安装Linux系统
本文目录: 1.1 pxe安装系统 1.2 cobbler基本介绍 1.3 安装和配置cobbler 1.3.1 安装cobbler 1.3.2 配置dhcp和tftp 1.4 cobbler从本地光 ...
- 读书笔记 之《Thinking in Java》(对象、集合)
一.前言: 本来想看完书再整理下自己的笔记的,可是书才看了一半发现笔记有点多,有点乱,就先整理一份吧,顺便复习下前面的知识,之后的再补上. 真的感觉,看书是个好习惯啊,难怪人家说"书籍是人类 ...
- 乐卡上海网点地图制作心得 | 百度地图API使用心得
前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...
- nmon-监控测试服务器 - Jmeter - 在Linux执行性能测试的方法 [2]
之所以把标题补充为<Jmeter - 在Linux执行性能测试的方法 [2]>,是因为在执行性能测试的过程中,我们需要关注的对象无非就是"测试服务器", 那么除了使用一些常见的观察服务器的 ...