文档章节

移动web页面支持弹性滚动的3个方案

同一种调调
 同一种调调
发布于 2014/07/17 16:03
字数 1009
阅读 1077
收藏 15

position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下:

  • ios4 和 android2.2 以下不支持 position:fixed
  • ios 不支持 overflow:auto
  • ios4 和 android2.3 以下以及不支持 overflow-scrolling

最严重的结果是:滚动区域内容无法拖动

对于 ios4 和 android2.2 以下不支持 position:fixed 的问题,有2种布局方法可以替代。

布局一: 定义页面整体高度为100%,然后使用 position:absolute 布局可解决

/*<!--absolute布局 [[ --><body>    <div class="header">header</div>    <div class="main">     弹性滚动区域    </div>    <div class="footer">footer</div></body><!--absolute布局 ]] -->*/html,body{height: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

overflow:auto 写法在 winphone8 和 android4+ 上有用。ios5+ 版本增加了一个新的属性:overflow-scrolling 这个属性可以激活平滑滚动,效果不错。

.css{overflow:auto;/* winphone8和android4+ */-webkit-overflow-scrolling: touch; /* ios5+ */}

适合场景:如果产品的用户群大多为 ios5+、android4+ 用户,建议采用 overflow-scrolling 做差异化体验,毕竟 iscroll4.js 在 android 机器下体验不顺畅,另外还加载了 10K 多的 js 代码。

 

方案二: iscroll4.js和overflow:auto

曾写过【使用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 */}

适合场景:如果产品的用户群有 ios 和大部分 android2+ 用户,而在 android 中的页面数据比较简单(通常弹性滚动数据只有文字),那么使用 iscroll4.js 可保证 android2+ 的机器展现正常也不卡顿,让ios用户滚动更顺畅。

 

方案三: 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>

本文转载自:http://www.th7.cn/web/html-css/201402/18119.shtml

共有 人打赏支持
同一种调调

同一种调调

粉丝 15
博文 41
码字总数 24014
作品 21
宝山
程序员
私信 提问
移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方
2017/12/26
0
0
Web移动端Fixed布局的解决方案

iOS下的 Fixed + Input BUG现象 让我们先举个栗子,最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): 对应的样式如下: 然后看起来就是下面这个...

WolfX
2016/03/30
61
0
web app开发利器 - iscroll4 解决方案

存在即是道理,iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容, 这个不幸的规则导致所有web...

文艺小青年
2017/06/29
0
0
移动端网页布局中需要注意事项以及解决方法总结

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" content="no"> 1、关闭iOS键盘首字母自动大写 <input type="text" autocapitaliz......

CharmyZ
2016/07/21
22
0
移动 Web 开发问题和优化小结

1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们...

守候i
2017/09/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【58沈剑 架构师之路】选redis还是memcache,源码怎么说

memcache和redis是互联网分层架构中,最常用的KV缓存。不少同学在选型的时候会纠结,到底是选择memcache还是redis。 画外音:不鼓励粗暴的实践,例如“memcache提供的功能是redis提供的功能的...

张锦飞
3分钟前
0
0
不要依赖于线程调度器(72)

多个线程可运行时, 线程调度器决定哪些线程将会被运行、以及运行多长时间 任何操作系统在处理该问题时,会 尽力做到公正,但是策略却大相径庭 编写良好的程序不要依赖这种策略细节,否则程序...

Java搬砖工程师
6分钟前
0
0
路由器AP、路由、中继、桥接模式之间的区别

在TP-Link迷你无线路由器上一般有AP(接入点)模式、Router(无线路由)模式、Repeater(中继)模式、Bridge(桥接)模式、 Client(客户端)模式;已经属于模式很全的路由了,尽管仅仅只是一个小...

吴伟祥
6分钟前
0
0
初识kafka的zookeeper

最近项目中,使用redis进行消息的分发与订阅。这种模式就是一种多播的方式,但是随着消息的不断增加,消费端来不及处理所有的数据。在没有持久化的功能下,很多数据丢失了。当然,也可以使用...

孟飞阳
8分钟前
0
0
赋能时空云计算,阿里云数据库时空引擎Ganos上线

随着移动互联网、位置感知技术、对地观测技术的快速发展,时空信息已从传统GIS行业渗透到大众应用及各行各业。从静态POI(兴趣点)到APP位置信息,从导航电子地图到车辆行驶轨迹,从卫星影像...

阿里云官方博客
9分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部