zoukankan      html  css  js  c++  java
  • [问题记录]父元素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,所有最后发现问题的我,眼泪掉下来!!!

  • 相关阅读:
    使用python3安装frida-tools出错
    xposed代码示例
    android studio3.4打jar包
    uiautomator代码例子--java
    Mac下不能成功打开uiautomatorviewer的问题解决
    mac下生成keystore
    Python杨辉三角算法
    Python迭代器:捕获Generator的返回值
    Python函数:一个简单的迭代
    Python参数组合
  • 原文地址:https://www.cnblogs.com/caoruiy/p/4745529.html
Copyright © 2011-2022 走看看