文档章节

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

同一种调调
 同一种调调
发布于 2014/07/17 16:03
字数 1009
阅读 1140
收藏 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

同一种调调

同一种调调

粉丝 20
博文 42
码字总数 26090
作品 27
宝山
程序员
私信 提问
移动端布局与适配

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

掘金官方
2017/12/26
0
0
基于Vue的移动端h5项目总结

以前都是写pc,后来需要写h5移动端项目,会遇到一些自适应和兼容性等方面的问题,下面从自己写过的h5项目中稍稍做点总结。 一.自适应布局 1.1 vw与rem相结合实现适配 1.原理 开启一个移动端项...

Wowoy
12/04
0
0
Web移动端Fixed布局的解决方案

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

WolfX
2016/03/30
103
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
53
0

没有更多内容

加载失败,请刷新页面

加载更多

006-Docker中导出单个或多个tar包

docker中导出单个镜像和多个镜像的tar包 docker save [images] > [name.tar] docker save [images] [images] > [name.tar]...

伟大源于勇敢的开始
今天
8
0
Kotlin基础语法学习

安装好安卓studio,以及插件支持Kotlin 就可以在创建项目的时候选择 Kotlin语言了。 https://www.jianshu.com/p/4ab13691d681 参考手册: https://www.runoob.com/kotlin/otlin-android-setu...

T型人才追梦者
今天
6
0
java实现简单计算器

1.概述 之前作者写过一篇文章,也是关于计算器的,用的是C++与Qt,链接在这里 这次用java的swing写的(这差距好像有点大,好吧是qt太强了). 先上图: 2.UI 总体布局使用流布局. (1)文本框 文本框就...

Blueeeeeee
今天
9
0
纯CSS实现DIV悬浮(固定位置)

纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下: 实现代码: <!DOCTYPE html> <html> <head> <meta ...

独钓渔
今天
6
0
OSChina 周二乱弹 —— 给我来个女菩萨

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐#分享XXXTENTACION/Travis Barker的单曲《Pain = BESTFRIEND》: 《Pain = BESTFRIEND》- XXXTENTACION/...

小小编辑
今天
155
4

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部