[BUG]scroll-view内嵌套fixed图层，渲染不完全
发布于 6 年前 作者 vhu 17572 次浏览 来自 问答

scroll-view组件中如果嵌套一个fixed定位的view，在真机IOS下，能够看到fixed的图层被遮挡住了，但是，遮挡住的部分却仍然可以交互（比如例子里的按钮遮挡的部分仍然可以点击）。明显是渲染不完全，我觉得开发工具的渲染逻辑是正确的，应该保证fixed图层完整。

scroll-view内嵌套fixed图层的场景，在多个自定义组件的嵌套使用时会经常需要，希望尽快修复~~~

WXML:

<view class="fiexd-layer">
  <view class="bg-mask"></view>

  < scroll-y class="scroll-body">

    <view class="fixed-layer">
      在iphone真机下： 这是一个fixed层，宽度100%，视觉上感觉是被父节点遮挡住了，但是遮挡的部分仍然可以进行交互，点击下面的按钮看看
      <button class="my-button" type="primary" bindtap="onFixedLayerButton_Tap">被遮挡的按钮</button>
    </view>
  </scroll-view>
</view>

WXSS:

.fixed-layer {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 300rpx;
  width: 100%;
  box-sizing: border-box;
  background-color: #f00;
}
 
.bg-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.66);
}
 
.scroll-body {
  position: absolute;
  right: 0;
  top: 0;
  width: 60%;
  height: 100vh;
  bottom: 0;
  background-color: #e7e7e7;
  padding: 0 0 0 10rpx;
  box-sizing: border-box;
}
3 回复

也遇到这个问题，后来解决方法是将要fixed定位的元素放到和scroll-view组件同层级就好了，包裹多一个view就好了。

如果用了组件的需要将父组件 z-index 调高；

我在 scroll-view 中使用了组件，组件的弹出层一直被其它 z-index 没它高的层挡住（只有 ios 会被挡住） ，我尝试将 scroll-view  style 增加  position: fixed;z-index:9999  ，scroll-view 中的组件弹层终于到了最高层

解决了吗

回到顶部