css - 位置：粘性不适用于内部元素

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 适用于 an 内的元素<ion-item>？

Answer 1

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

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