推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 3609 天前的主题，其中的信息可能已经有所发展或是发生改变。
前端不在行，这个问题 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