[问题记录]父元素position:relative的深坑

个人博客迁移至:https://blog.plcent.com/欢迎大家访问

今天在写全屏切换的时候,发现一个问题就是切换时只能滚动第一屏,其他屏死都不动,

全屏滚动的原理:

是每次滚动父元素向上滚动一个元素的高度,比如每张图片都是100px高,第一次父元素 transform:translate3d(0px, -100px, 0px);第二次就是transform:translate3d(0px, -200px; 0px)

但是问题来了,第一次滚动时,第一个元素position()为:top:0px,left:0px;第二个为top:100px,left:0px;,所以可以滚动,

第二次滚动时,第一个元素position()为:top:-100px,left:0px;第二个为top:0px,left:0px;,此刻查找第三个元素position()为:top:100px,left:0px;,得到第三个top为100px,当然不滚动.

意思就是每次滚动,所以元素的position都减去了100px

但是我纳闷,说好的position不是应该不变的么??

查了好久发现,在父元素上添加了一个position:relative,居然能滚了,position()值也不变了,在疑惑中,查看了jQuery手册,http://www.jquery123.com/position/

上面的解释赫然写着:

position():获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。( 译者注:offset parent指离该元素最近的而且被定位过的祖先元素 )

不知道有没有注意译注,( 译者注:offset parent指离该元素最近的而且被定位过的祖先元素 ),被定位过!!!他与offset()的区别是一个是相对于父元素,一个相对于document,父元素没有position过,相对的父元素也是document,所有最后发现问题的我,眼泪掉下来!!!

posted @ 2015-08-20 16:13  caoruiy  阅读(...)  评论(... 编辑 收藏