位置：粘性不适用于 <ion-item> 内的元素

Question

我实现了一个表格，很宽（比屏幕宽很多），用户可以水平滚动。

在最左边，是一个任务行组件，它有一个带有“粘性”标题的元素（.task-row_main 类），在水平滚动时不会移动，使用 css position: sticky。

.task-row_main {
    display: flex;
    align-items: center;
    max-width: 230px;
    flex-shrink: 1;
    flex-grow: 1;
    position: -webkit-sticky;
    position: sticky;
    left: 1px;
}

当我将任务行组件添加到 ion-item 时，粘性标题会中断。水平滚动会导致粘性标题滚动到屏幕外。

<ion-item>
    <task-row>
    </task-row>
</ion-item>

但是当我不将其包装在 ion-item 中时，它可以工作：

<task-row>
</task-row>

如何使 position:sticky 适用于 <ion-item> 内的元素？

Answer 1

试试这个可能会解决你的问题，如果你会选择 left:0px 和 right:0px;那么它将占用 100% 的宽度。

.ion-item{
  position:relative;
}
.task-row {
    position: sticky;
    left:1px;
    top: 0px;
    right:0px
}