碰到的问题

196 阅读1分钟

原因一:

微信小程序官方在scroll-view上设置了-webkit-overflow-scrolling: touch,导致浏览器单独创建了一个UIScrollView, 内部的fixed定位元素,是基于这个UIScrollView来定位的,而不是根节点的Viewport。 解决办法:

.scroll .wx-scroll-view {    
    -webkit-overflow-scrolling: auto; 
 }

原因二:

固定定位元素和transform同时使用,元素的固定定位特性是保留的,可要是固定定位元素的祖先有transform设置(或者scale/translate/rotate/filter等属性),则固定定位元素会表现为绝对定位一般。

  • 父元素样式带有transform属性会导致 子元素的 fixed 失效