推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 3272 天前的主题，其中的信息可能已经有所发展或是发生改变。
前端不在行，这个问题 Google 了很久没有头绪，只好请教各位大神了。
简单说，就是移动版 web 页面，设置了 header 块级元素为 position:fixed ，这样拖动页面上下滚动就会一直浮在最顶部。
但是问题出在部分移动浏览器上，比如 iOS 7 上的 Safari ，当页面已经滚动到最顶部时，继续下拖，即往上滚动页面时，整个页面会被“拖拽”下来，包括浮动的 header ，上面出来一个灰色的背景。
而类似 iOS8 上貌似就不会。
有没有办法能规避这种情况呢？
手机没法传图，回头补一张图更直观。
简单说，就是移动版 web 页面，设置了 header 块级元素为 position:fixed ，这样拖动页面上下滚动就会一直浮在最顶部。
但是问题出在部分移动浏览器上，比如 iOS 7 上的 Safari ，当页面已经滚动到最顶部时，继续下拖，即往上滚动页面时，整个页面会被“拖拽”下来，包括浮动的 header ，上面出来一个灰色的背景。
而类似 iOS8 上貌似就不会。
有没有办法能规避这种情况呢？
手机没法传图，回头补一张图更直观。
第 1 条附言 · 2015-11-24 12:42:35 +08:00
多谢各位，晚上回去试试
 |
1
v1024 2015-11-24 08:43:02 +08:00 via iPhone
把网页的主体部分再放到一个 overflow ： Scroll 的层里，这样拖拽的就是这个层里面的内容而不是整个网页。
|
 |
2
66beta 2015-11-24 09:04:21 +08:00
慎用 fixed ，有输入框的时候，框都要被它挡住的
|
 |
3
ljcarsenal 2015-11-24 09:05:01 +08:00
在 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"/>试试呢
|
 |
4
rain0002009 2015-11-24 09:06:01 +08:00  2
|
 |
5
LucasW 2015-11-24 09:52:33 +08:00
html, body{
height:100%; position:relative; -webkit-overflow-scrolling: touch; } header { position:absolute; top:0; left:0 } |
 |
6
hkongm 2015-11-24 10:26:05 +08:00 1
focus 时， fixed 改为 absolute
原生键盘影响了定位 我们的做法：不在有 input 的情况下设计 fixed 元素，列为规范 小 tip ： position:-webkit-sticky; |
 |
7
hqs123 2015-11-24 10:27:39 +08:00
楼主 php 功力有待加强啊...
|
 |
8
datou552211 2015-11-24 10:34:23 +08:00 via iPhone
@hqs123 php ？
|
 |
10
JerryZou 2015-11-24 16:00:39 +08:00 1
我觉得是 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 |
Select Language