【转】移动web页面支持弹性滚动的3个方案
传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同、版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG。
上图如果在PC端中,我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下:
- ios4 和 android2.2 以下不支持 position:fixed
- ios 和 android2.3 以下不支持 overflow:auto
- ios4 和 android 不支持 overflow-scrolling
最严重的结果是:滚动区域内容无法拖动
对于 ios4 和 android2.2 以下不支持 position:fixed 的问题,有2种布局方法可以替代。
布局一: 定义页面整体高度为100%,然后使用 position:absolute 布局可解决

/*
<!--absolute布局 [[ -->
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
<!--absolute布局 ]] -->
*/
html,body{height:100%;}
.wrap{width:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.header{position: absolute;top:0;left:0;width:100%;}
.footer{position: absolute;bottom:0;left:0;width:100%;}
.main{position:absolute;z-index:1;top:40px;left:0;bottom:40px;width:100%;}

布局二: 定义页面整体高度为100%,然后使用 display:flex 布局可解决

/*
<!-- flex布局 [[ -->
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
<!-- flex布局 ]] -->
*/
html,body{height:100%;}
.wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.main{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;}

那么剩下的主要问题是子容器高度超出父容器高度,子容器内容如何弹性滚动。
对于如何使用弹性滚动,这里并没有最好的方案,具体看产品的用户群、产品的定位等,简单介绍下:
方案一: overflow:auto和-webkit-overflow-scrolling: touch
适合场景:产品的用户群大多为 ios5+、android4+ 用户,建议采用 overflow-scrolling 做差异化体验,毕竟 iscroll4.js 在 android 机器下体验不顺畅,另外还加载了 10K 多的 js 代码。
overflow:auto 写法在 winphone8 和 android4+ 上有用。ios5+ 版本增加了一个新的属性:overflow-scrolling 这个属性可以激活平滑滚动,效果不错。
.css{
overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
}
方案二: iscroll4.js和overflow:auto
适合场景:产品的用户群有 ios 和大部分 android2+ 用户,而在 android 中的页面数据比较简单(通常弹性滚动数据只有文字),那么使用 iscroll4.js 可保证 android2+ 的机器展现正常也不卡顿,让ios用户滚动更顺畅。
曾写过【使用iScroll.js解决ios4下不支持position:fixed的问题】,使用 iscroll4.js 基本上解决了页面弹性滚动的问题,总结下 iscroll4.js 的体验:
- 在 ios 系统上的表现十分良好,滚动顺畅
- 在部分 android 系统上性能较差,特别是滚动区域内容多时,滚动页面会出现卡顿
- ios 和 android 系统下有不少 bug,如表单获焦弹出软键盘后页面高度没有重新计算、出现闪屏等(这里不做讨论)
- winphone 不支持
那么这里的处理方案是,页面初始化时判断是 weibit 浏览器则启用 iscroll4.js
<div class="wap ie-ova" id=""><!-- webkit 用户设置 ID 为 iscroll,可启用iscroll -->
...
</div>
winphone8 手机使用如下 hack
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ie-ova{overflow:auto;} /* winphone8 */
}
方案三: iscroll4.js和overflow:auto和android2x.css
适合场景:产品的用户群有 ios 和大部分 android2+ 用户,而在 android 中页面数据比较复杂(通常弹性滚动数据有大量图片),那么可针对 android2+ 的机器做静态定位展现(position:static),页面不具备滚动效果,而对于 ios 用户仍然使用 iscroll4.js。
<link rel="stylesheet" href="android2x.css"><!-- android2+ 用户多引用的css文件 -->
.css{
overflow:auto;/* winphone8和android4+ */
}
<div class="wap" id=""><!-- ios 用户设置 ID 为 iscroll,可启用iscroll -->
...
</div>
ok~
出处:http://peunzhang.cnblogs.com/
【转】移动web页面支持弹性滚动的3个方案的更多相关文章
- 【原】移动web页面支持弹性滚动的3个方案
有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动we ...
- 移动web页面支持弹性滚动的3个方案
有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动we ...
- web+页面支持批量下载吗
一.此方法火狐有些版本是不支持的 window.location.href = 'https://*****.oss-cn-**.aliyuncs.com/*********';二.为了解决火狐有些版 ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- 移动端web页面滚动不流畅,卡顿闪烁解决方案
移动端web页面滚动不流畅,卡顿闪烁解决方案 1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...
- web页面在ios下不支持fixed可用absolute替代的方案
本文引用出处:http://www.cnblogs.com/PeunZhang/p/3553020.html. 对于 ios4 和 android2.2 以下不支持 position:fixed 的问 ...
- web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动
场景概述 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...
- Swipe JS – 移动WEB页面内容触摸滑动类库
想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...
- ASP.NET页面支持的指令
页面的处理指令 页面指令的处理用于配置执行该页面的运行时环境.在ASP.NET中,指令可以位于页面的任何位置,但良好且常见的习惯是将其置于文件的开始部分.除此,页面指令的名称是不区分大小写的,且指令的 ...
随机推荐
- mysql里表以及列的增删改查
在一个表里插入数据(增) insert into 表名 (需要插入的列名如 id,name,age)values (1,'张三',20), (2,'李四',30): 查询表内容(查 ...
- python中使用chrome进行自动化测试,浏览器变量设置
- Sample Apps by Android Team -- Amazed
Sample Apps by Android Team 代码下载:http://pan.baidu.com/s/1eSNmdUE , 代码原地址:https://code.google.com/arc ...
- 在SSIS包中的事务处理
在处理SSIS包的数据ETL操作过程中,我们经常遇到的一个问题就是一系列步骤在运行的过程中,如果中间的一个步骤失败了,那么我们就需要清理前面已经运行过的步骤所产生的数据或者结果,这往往是一个很头疼的过 ...
- 华为Mate8 NFC 时好时坏,怎么解决呢?
拿起手机朝桌子上磕几下,nfc就好用了.这是花粉总结的,我也试过,很灵.注意要带套,摄像头朝下,头部低一点往下磕.因为nfc芯片在头部,估计是接触不良.
- golang 索引
入门的基础路线 a Tour of GoEffective GoGo By Example 以上的三部分通读算是入门. 4个重要的组成部分 1. 基础知识2. 并发特性3. 异常处理4. 常用开源项目 ...
- WPF中查看PDF文件
需要打开PDF文件时,我们第一印象就是使用Adobe Reader.在开发中,经常会遇到需要展示PDF文件的需求.我们会借助于Adobe Reader的Active控件来实现.不过这需要客户的机器上安 ...
- uint8_t / uint16_t / uint32_t /uint64_t 是什么数据类型 - 大总结,看完全明白了
转自:http://blog.csdn.net/kiddy19850221/article/details/6655066 uint8_t / uint16_t / uint32_t /uint64_ ...
- Kmeans聚类算法原理与实现
Kmeans聚类算法 1 Kmeans聚类算法的基本原理 K-means算法是最为经典的基于划分的聚类方法,是十大经典数据挖掘算法之一.K-means算法的基本思想是:以空间中k个点为中心进行聚类,对 ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...