固定高度/宽度卡片中的文本，带有溢出轮播以显示剩余内容

Question

我有一张固定高度和宽度的卡片，我必须在其中填充动态内容。其内容将是一个简单字符串格式的 {key, value} 大列表。我必须用换行符显示每个键值对。

1. 在每个键值对后添加一个换行符。
2. 如果列表超出卡片高度，请在底部添加一个下一步按钮，单击时显示剩余文本。

例如：假设我的卡可以容纳 3 个键/值对，并且如果有 9 个条目，那么我必须显示 3 页带有下一个/上一个按钮的文本。

我猜想通过溢出属性我们可以识别并添加一个滚动条，但是我该如何进行分页呢？有没有像 column-count 这样的属性或可以提供帮助的东西？我不知道如何处理这个问题。

Answer 1

我不认为 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
});