小程序 scroll-view 组件中绝对定位超出的部分会不显示

正常情况下父容器设置为 relative, 子容器设为 absolute. 当子容器超出了父容器的范围, 只要父容器没有设置 overflow: hidden, 那么子容器是可见的.

比如我有一个例子. 每一行的右侧会绝对定位一个图标. 因为行内的文字会铺满, 所以图标需要往右超出父容器一定的距离.

<div class="container">
  <div class='scroll'>
      <div class='row'>
          <div>这是一条行信息. 每行右侧会有一个 icon</div>
          <img class='toolbar-icon' src="src/assets/logo.svg" alt="toolbar-icon">
      </div>

      <div class='row'>
          <div>这是一条行信息. 每行右侧会有一个 icon</div>
          <img class='toolbar-icon' src="src/assets/logo.svg" alt="toolbar-icon">
      </div>
  </div>
</div>

.container {
  border: 1px solid green;
  padding: 30px;
  width: 280px;
  box-sizing: border-box;
  position: relative;
}

.row {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
}

.toolbar-icon {
  width: 20px;
  position: absolute;
  right: -15px;
  top: 0;
}

这样的例子在 h5 中是没有问题的.

但是在小程序中, 当把 <div class='scroll' /> 替换成 scroll-view 组件就不行了.

小程序 scroll-view 组件中绝对定位超出的部分会不显示

效果相当于是设了 overflow: hidden.

在小程序开发工具中预览

了解了这个现象就好解决了, 把 padding 放到 scroll-view 组件内就可以了.

Luck🤞🍀