如何制作帶有固定離子卡頭和可滾動離子卡內容的離子卡？

Question

就像這個問題一樣，我需要讓我的離子卡在固定離子卡頭的情況下滾動，就像離子頭和離子含量會發生什么一樣。

我把這個 css 代碼放在我的頁面上：

ion-card{
        height: 80%;
        width: 100%;
        overflow: scroll;

        ion-card-header{
            margin-bottom: 10px;
        }

我的離子卡現在可以滾動，但是離子卡頭也可以滾動，我希望在向下滾動時將它固定在卡的頂部。

我還嘗試添加 ion-card-header css 塊“位置：固定”或“位置：粘性”，但沒有任何變化。

我在互聯網上找不到任何解決方案，有人可以幫忙嗎？

Answer 1

如果我正確理解了您的問題，那么您想要一張帶有固定標題和滾動內容的卡片。

這不會發生在您的 CSS 中，因為您正在應用overflow: scrollable到整個ion-card元素。 你需要把它們分開。

所以你最終應該得到類似的東西（重構你認為最好的）：

ion-card {
   height: 80%;
   width: 100%;
}

ion-card > ion-card-content {
   height: 150px; //your height of content here
   overflow: scroll;
}

您不需要將固定屬性應用於標頭，因為默認情況下它應該保持固定。