【解决】Android 2.x 不支持overflow、position:fixed解决方案【转】

Android 2.x和IOS5以下都不支持overflow:auto属性（position:fixed也不支持）。

移动端浏览器兼容性和PC端相比，有过之而无不及。操作系统版本及各式浏览器和各式的屏幕大小排列组合，你永远也无法预测到你的应用会在哪部手机上冒出什么样的问题。
测试过各种浏览器（chrome手机浏览器、百度手机浏览器、手机QQ浏览器、UC浏览器、UC浏览器HD、safari浏览器、firfox手机浏览器、WinPhone系统上的各浏览器，终端包括手机、ipad及PC android模拟器、PC IOS模拟器）

其中有几个比较明显的问题：

1、一些手机对position:fixed支持不完善（跟着手势滚动后再弹回到固定位置，怀疑是否手机或是浏览器性能问题，渲染速度跟不上导致这种“卡”的效果）
2、一些手机或浏览器对overflow:auto支持不完善，在小米自带的浏览器中，对固定高度的容器设置overflow:auto后，容器内容超过容器高度后，直接被隐藏，无论怎么拖动都无法显示。特别是iframe中的overflow情况更为复杂。
3、WinPhone更为恐怖，显示效果和IE7差不多了，不支持CSS3的gradient,线性背景直接显示灰白色。
由此可见，要做到兼容各系统版本，各浏览器，各屏幕大小也着实不易。
4、基本都支持min-height属性

对于某些手机不支持overflow:auto情况，最佳解决方案就是：不去用overflow:auto属性，即不要去设置一个固定的高度。后续会讲到其它解决方案。

话说是在做APP的点击题号跳转功能时出现的这个问题，预想中的功能是这样的：点击题号列表按钮，弹出全屏题号列表 (position:fixed;top:20px /*空出APP的header*/;bottom:0px;overflow;auto;）,当题目很多时，就可以滑动显示题号点击跳转。测试时小米自带浏览器根本无法滑动，三星中的浏览器可以滑动部分，但显示不全。

调试方案一
于是想，既然Android和IOS高版本支持overflow属性，那就写个兼容的方法：

1
.box{position:absolute;top:20px /*空出APP的header*/;min-height:500px /*box需遮住整个页面*/;}

2
@media all and (-webkit-transform-3d){/* Android4.0下不识别该-webkit-transform-3d，使用它可做Android4.0下版本兼容 */

3
    .box{position:fixed;top:20px;bottom:0px;overflow;auto;min-height:0px;}

4
}

[注：hack来源及分析请参考：【原】webapp开发中兼容Android4.0以下版本的css hack ]
但测试效果却并不尽如人意，在Android4.x的QQ浏览器中，根本未识别这个hack，百度浏览器中成功识别，但滑动后题号还是显示不全，chrome浏览器相对支持较好。

调试方案二（1）
经过查找，德问上也有人提出这个问题，根据参考答案测试了一下

安卓2.3系统webview不支持网页的div滚动条，各位有解决方法么

android2.3的不支持滚动条，并且scrollTop也不支持的。（设置overflow未hidden就可以支持）。
给你个方法保准OK，望采纳：

01
function noBarsOnTouchScreen(arg)

02
{

03
  var elem, tx, ty;

04
 
05
  if('ontouchstart' in document.documentElement ) {

06
          if (elem = document.getElementById(arg)) {

07
              elem.style.overflow = 'hidden';

08
              elem.ontouchstart = ts;

09
              elem.ontouchmove = tm;

10
          }

11
  }

12
 
13
  function ts( e )

14
  {

15
    var tch;

16
 
17
    if(  e.touches.length == 1 )

18
    {

19
      e.stopPropagation();

20
      tch = e.touches[ 0 ];

21
      tx = tch.pageX;

22
      ty = tch.pageY;

23
    }

24
  }

25
 
26
  function tm( e )

27
  {

28
    var tch;

29
 
30
    if(  e.touches.length == 1 )

31
    {

32
      e.preventDefault();

33
      e.stopPropagation();

34
      tch = e.touches[ 0 ];

35
      this.scrollTop +=  ty - tch.pageY;

36
      ty = tch.pageY;

37
    }

38
  }

39
}

40
 
41
调用的时候：

42
noBarsOnTouchScreen（divId）;

对于iframe中的容器overflow支持却并不怎么好，首先反应比较慢，其次操作控制不准，有时候滑动的iframe的滚动条，有时候又滑动容器的滚动条，每滑动一下就得卡两下（三星glaxay双核及小米，性能不是问题）。

调试方案二（2）
相同原理的应该还有如下这个方案：
[方案来源：mobile safari 下overflow:auto的解决方法 ]

01
function isTouchDevice(){

02
    try{

03
        document.createEvent("TouchEvent");

04
        return true;

05
    }catch(e){

06
        return false;

07
    }

08
}

09
 
10
function touchScroll(id){

11
    if(isTouchDevice()){ //if touch events exist...

12
        var el=document.getElementById(id);

13
        var scrollStartPos=0;

14
 
15
        document.getElementById(id).addEventListener("touchstart", function(event) {

16
            scrollStartPos=this.scrollTop+event.touches[0].pageY;

17
            event.preventDefault();

18
        },false);

19
 
20
        document.getElementById(id).addEventListener("touchmove", function(event) {

21
            this.scrollTop=scrollStartPos-event.touches[0].pageY;

22
            event.preventDefault();

23
        },false);

24
    }

25
}

26
 
27
最后使用touchScroll("MyElement"); 将你需要overflow:auto的元素id调用这个方法即可。

未做测试，暂保留意见，猜想和上个一样的效果，有测试过的可反馈一下。

调试方案三：
最受大家追捧的就是如下这个方案：
使用iScroll框架(http://cubiq.org/iscroll-4)，iScroll可以说是解决以前提到的各种bug的一剂万能良药：

区域滚动

固定定位

缩放（Pinch/Zoom）

拉动刷新（Pull up/down to refresh）

速度和性能提升

精确捕捉元素

自定义滚动条

使用方法参考：
Android 设备页面内 div（容器，非页面）overflow:scroll; 失效解决
 iScroll框架解析——Android 设备页面内 div（容器，非页面）overflow:scroll; 失效解决
 web app开发利器 - iscroll4 解决方案
 【原】使用iScroll.js解决ios4下不支持position:fixed的问题

大都使用JS的解决方案都会涉及到性能问题，有些卡顿是很正常的事，毕竟浏览器的性能都参差不齐（Chrome和Firefox手机版浏览器安装文件都有 23M左右，QQ、百度、UC等都只有三、五M左右，所以相比chrome和Firefox完美的性能，其它浏览器不正常才正常的。）

综上：最佳的兼容方案就是，不使用容器固定高度+overflow:auto这种结合。顺其自然，高度是多少就给它显示多少，让浏览器自己处理滑动显示的问题。