我有一張固定高度和寬度的卡片，我必須在其中填充動態內容。其內容將是一個簡單字串格式的 {key, value} 大串列。我必須用換行符顯示每個鍵、值對。
- 在每個鍵值對之后添加一個換行符。
- 如果串列超出卡片高度，請在底部添加一個下一步按鈕，單擊時顯示剩余文本。
例如：如果假設我的卡可以容納 3 個鍵/值對并且如果有 9 個條目，那么我必須顯示 3 頁帶有下一個/上一個按鈕的文本。
我想通過溢位屬性我們可以識別并添加一個滾動，但是我該怎么做這個分頁呢？有沒有像 column-count 這樣的屬性或可以提供幫助的東西？我不知道如何解決這個問題。
uj5u.com熱心網友回復：
我不認為 CSS 具有在單擊 NEXT 或 PREV 按鈕后滾動一定數量頁面的邏輯。您需要使用一些 Javascript 來實作該功能。
對于“下一步”按鈕，您應該使用以下代碼：
nextBtn.addEventListener('click', function(){
let cardHt = card.offsetHeight;//Calculate the height of the card
card.scrollY(cardHt 'px');//Scroll down the height of the card
});
同樣，對于“PREV”按鈕，您需要使用：
prevBtn.addEventListener('click', function(){
let cardHt = card.offsetHeight;//Calculate the height of the card
card.scrollY(-cardHt 'px');//Scroll up the height of the card
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/406664.html
標籤：
上一篇：如何解決標簽面板樣式問題？