小程序fixed

问题:散客预订模块滚动容器中popup的fixed定位被父级元素的overflow:auto干扰,导致popup中的内容层级不能覆盖外部的预订按钮的层级,通过demo测试排查,发现该问题只有在小程序中存在,在PC端浏览器中是不存在的。

解决:

(1)滚动的容器不设置overflow:auto,按正常的文档流让内容自动撑高。(这种 不会造成滑到底部时底部由于弹性底部按钮被覆盖)

(2)滚动的容器设置overflow:auto,预订按钮也要放在该滚动容器中,这就也可以解决层级关系的问题。(这种方法会造成滑到底部由于弹性的原因继续往下滑时会发现页面的白色背景覆盖在底部fixed的元素之上)

注意:page元素最好不要设置height100%overflow:auto,文档超出会自动滚动的。如果需要固定顶部或者底部的话,顶部或者底部用fixed,然后滚动区域加paddingtop和paddingbottom把位置空出来。
page设置 了100%height的话,page内的直属的fixed元素不会被滑到底部由于触底回弹效果遮盖,但是如果其他元素A再设置height100%,overflow:auto的话,A内部的直属fixed元素会由于A的oveflow造成触底回弹被遮盖,同时A内部的fixed定位的层级会失效,层级不管设多高都不会高于overflow元素外层的其他fixed元素。
page设置了overflow也不会使直属的fixed的层级失效。

如果需要全屏监听滚动事件,需要使用scroll-view,同时给scroll-view设置fixed,top:0,bottom:0,来起到height:100%的效果。
小程序中overflow和scroll-view会造成该滚动容器内部的fixed部分功能失效即:层级关系失效,滑动底部由于弹性继续滑时fixed元素会被白色背景遮挡掉。
page容器设置overflow在滚动到底部的时候是不会存在fixed被遮盖的问题,其他的元素只要设置overflow或者是scroll-view元素在滚动到底部的时候内部的fixed元素都会被遮盖,所以要把内部的fixed拿到元素外边。这可能是因为微信滚动回弹的原因造成的,可以滚动的元素再滚动到顶部或者底部的时候都会有一定的弹性,可以继续往下或者往上有滚动回弹的效果。
不管scroll-view有没有设置height,只要fixed元素在scroll-view中,fixed都会存在触底反弹被遮盖的问题和层级关系问题。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值