位置：粘性对于<ion-item> [ionic]

Question

我实现了一个表格，该表格非常宽（比屏幕宽得多），并且用户可以水平滚动。

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

.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>

我该如何定位：<ion-item>中的粘滞元素适用于元素？

Answer 1

尝试此操作，如果您将left：0px和right：0px设为1，则可以解决您的问题；那么它将占用100％的宽度。

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