请教一个前端问题，困扰很久了

[lostab]

前端不在行，这个问题 Google 了很久没有头绪，只好请教各位大神了。
简单说，就是移动版 web 页面，设置了 header 块级元素为 position:fixed ，这样拖动页面上下滚动就会一直浮在最顶部。
但是问题出在部分移动浏览器上，比如 iOS 7 上的 Safari ，当页面已经滚动到最顶部时，继续下拖，即往上滚动页面时，整个页面会被“拖拽”下来，包括浮动的 header ，上面出来一个灰色的背景。
而类似 iOS8 上貌似就不会。
有没有办法能规避这种情况呢？
手机没法传图，回头补一张图更直观。

[v1024]

把网页的主体部分再放到一个 overflow ： Scroll 的层里，这样拖拽的就是这个层里面的内容而不是整个网页。

[66beta]

慎用 fixed ，有输入框的时候，框都要被它挡住的

[ljcarsenal]

在 head 里加入 <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>试试呢

[rain0002009]

https://github.com/maxzhang/maxzhang.github.com/issues/2
https://github.com/maxzhang/maxzhang.github.com/issues/11

[LucasW]

html, body{
height:100%;
position:relative;
-webkit-overflow-scrolling: touch;
}
header {
position:absolute;
top:0;
left:0
}

[hkongm]

focus 时， fixed 改为 absolute
原生键盘影响了定位

我们的做法：不在有 input 的情况下设计 fixed 元素，列为规范

小 tip ： position:-webkit-sticky;

[hqs123]

楼主 php 功力有待加强啊...

[datou552211]

@hqs123 php ？

[DIYgod]

@hqs123 哈哈哈哈什么鬼

[JerryZou]

我觉得是 page bounce effect 的问题，你用这个关键词 google 看看，一般是 iOS 上才有的问题。

- http://stackoverflow.com/questions/20461485/ios-disable-bounce-scroll-but-allow-normal-scrolling
- http://stackoverflow.com/questions/8150191/disable-elastic-scrolling-in-safari
- https://github.com/timbartsch/no-bounce

[lostab]

@JerryZou Good ，这个方法的确规避了这个很恶心的情况，虽然还不是太完美（下拉的时候没有任何回弹效果了）。

[JerryZou]

@lostab 是啊，我以前尝试解决这个问题也没找到什么很好的办法。