文档章节

关于 IOS5 使用 position:fixed 与 scrollTo 共存的 bug

zTree
 zTree
发布于 2013/01/10 16:41
字数 523
阅读 3080
收藏 7

   这两天帮某个项目处理后事,本以为可以轻松搞定,不成想又发现了一个bug.....

   背景描述:ios5 提出了支持 position:fixed ,于是乎大家觉得让浮动的图层固定在屏幕最下方容易多了,赶紧用上吧。可是呢。。。页面上又有好多地方需要用到 scrollTo 控制滚动条移动,尤其是页面刚加载完毕需要让浏览器默认的 url 栏消失,一般都用 scrollTo(0,0) 或 scrollTo(0,1) 之类的。。。当这两者混合时就出现问题了, 浮动的div 虽然是你看到的在最下方,但是实际上这个div 内的触控点全都漂移了。

    (画外音:通过这件事情,我们明白了一个道理:不能只相信你的眼睛....)


    用 iphone 访问地址:http://ztree.me/issueTest/iosFixed.html   (注意,此 bug 在 iphone5上不存在!应该是 ios6 系统修正了这个bug。

    你就可以重现上图的问题,看触屏的位置,那里没有任何内容,但是点击后会看到灰色阴影,点击后 alert 44,这说明 click 44 这个 li 的位置实际上漂移到了那里。

    bug 描述:通过这个 Demo 可以基本确定 bug 的原因——利用 scrollTo 滚屏时,会导致 position:fixed 的图层视图不变,但对应的 DOM 实际响应位置却跟随 滚动条一起移动了,并未进行 fixed 的修正,从而导致了这个bug 的产生。

    解决方案:经过简单测试发现,出现这种 bug 后,只需要用手移动一下屏幕就没问题了,所以尝试在 执行了 scrollTo 后,立刻改变 body 的高度,哪怕是1个像素也可,然后这个世界就清净了!! 

    不过记住了,要利用 setTimeout !想看源码,直接右键看演示页面的源码吧!

    最后,如果你有更好的方法处理这个问题 或 发现我的测试出现了失误,也希望赶紧告诉我.....

© 著作权归作者所有

共有 人打赏支持
zTree

zTree

粉丝 831
博文 21
码字总数 21754
作品 1
朝阳
技术主管
私信 提问
加载中

评论(5)

zTree
zTree

引用来自“liliZ”的评论

在滚屏过程中,fixed定位异常,touchend之后恢复正常,这个问题怎么解决???
ios 上 fixed 经常会出现各种问题,尤其是 fixed 与 输入时弹出的键盘更会出现各种意想不到的效果! 总的来说,还是要首先根据需求判断采用何种解决方法。

普通干脆的方法是 最外层的 div 用 position absolute 铺满全屏, 滚动条是这个 div 内的,并不是整个 body 的,这样比较方便处理, 因为相对于此div 可以设置其他 absolute 的div 在顶部固定,并且不会被 滚动条影响
liliZ
liliZ
在滚屏过程中,fixed定位异常,touchend之后恢复正常,这个问题怎么解决???
有个地方叫作遥远
有个地方叫作遥远
我擦,原来是这么一回事
pineapp6e
pineapp6e
太行
太行
楼主是个好同志
android 如何解决scrollTo无法执行

在Activity 的 onCreate() 方法(貌似在onStart和onResume也一样)中, 调用 mScrollView.scrollTo(0, 100); 是无效, 没有效果的. 找了半天, 终于在 http://stackoverflow.com/questions/32632...

西门好又多
2012/06/06
0
0
JQuery插件:ScrollTo平滑滚动到页面指定位置

ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多,页面长度有好几屏的场合,本文以DEMO为示例讲解该插件的应用。查看演...

Junn
2013/01/16
0
0
android中listview左滑删除,点击删除按钮的时候,总是从删除最后一行,什么原因

listview左滑删除,点击删除按钮的时候,总是从删除最后一行, listview里面每个item都是一个list.get(position),list集合里面有几个数组,填充每个item的控件 //...

寻问学者
2016/04/11
1K
2
Android 带你从源码的角度解析Scroller的滚动实现原理

转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17483273),请尊重他人的辛勤劳动成果,谢谢! 今天给大家讲解的是Scroller类的滚动实现原理,可能很...

程序袁_绪龙
2015/08/13
0
0
ScrollView反弹效果的实现

View中也有scrollBy和scrollTo这两个方法,但是ScrollView对scrollTo进行重写 由于: public void scrollBy( int x, int y) { scrollTo(mScrollX + x, mScrollY + y); } View: public void ......

长平狐
2012/08/21
487
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0
Kernel I2C子系统

备注:所有图片来源于网络 1,I2C协议: 物理拓扑: I2C总线由两根信号线组成,一条是时钟信号线SCL,一条是数据信号线SDA。一条I2C总线可以接多个设备,每个设备都接入I2C总线的SCL和SDA。I...

yepanl
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部