如何判断内容超出盒子从而进行分页展示？

写一个固定高度的盒子，内容超出盒子高度，创建一个新的盒子继续展示内容。
1.js如何判断内容是否超出盒子高度(内容不固定)
2.内容是一个数组展示的不同对象数据，数据展示一半超出的话在另一个盒子暂时，中间会有一段距离，怎么把数据截取下来在超出创建的那一个盒子上边展示？
这个是我现在写的没分页

img


这个是参考网站上边写的看不到源码

img

在内容底部放一个IntersectionObserver监听对象，如果这个被监测的对象出现在你设定的可视元素内，说明内容没有超出，否则内容超出

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7666213
  • 这篇博客也不错, 你可以看下处理一个数组对象，按照父子关系的顺序输出一个新的数组对象
  • 除此之外, 这篇博客: 关于学习TS中的一些笔记中的 多态：父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现抽象类，抽象方法使用关键字，抽象类的子类必须实现抽象类里面的抽象方法。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • abstract class Animal {
  name:string;
  constructor(name:any){
    this.name = name;
  }
  abstract eat():any;
} 

class Dog extends Animal {
  constructor(name: any) {
    super(name);
  };
  eat() {
    console.log(this.name + '抽象方法继承')
  }
} 
const dog = new Dog('小花花')
  • 您还可以看一下 2017CCTC大会老师的【大数据专场】大数据安全分析在电子银行业的探索与实践课程中的 大数据安全分析在电子银行业的探索与实践小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    我可以给出如下JavaScript实现方案：

    1. 获取对应盒子元素及其内容，计算其实际高度（offsetHeight）和最大高度（maxHeight，可在CSS中进行设置），并得出是否超出最大高度的判断，若超出，则进行分页处理：

    ```javascript const box = document.getElementById('box'); // 根据实际情况替换ID const content = box.innerHTML; const actualHeight = box.offsetHeight; // 盒子元素的实际高度 const maxHeight = parseInt(window.getComputedStyle(box).maxHeight); // 盒子元素的最大高度 const isOverHeight = actualHeight > maxHeight; // 是否超出最大高度

    if (isOverHeight) { // 分页处理，具体实现可根据需求进行调整 const pageCount = Math.ceil(actualHeight / maxHeight); const contentArr = content.split(''); let newContent = ''; for (let i = 0; i < pageCount; i++) { const start = i * maxHeight; const end = (i + 1) * maxHeight; const pageContent = contentArr.slice(start, end).join(''); newContent += <div class="page">${pageContent}</div>; } box.innerHTML = newContent; } ```

    1. 如果进行了分页处理，则可以在CSS中为每个分页添加样式，以实现平滑过渡效果（例如设置每个分页的 opacity 和 transition）。

    ```css / 页面默认隐藏，避免分类处理后的分页内容在页面即时出现，体验不是特别好 / .page { opacity: 0; transition: opacity 0.5s; }

    / 显示当前选中的分页 / .page.selected { opacity: 1; } ```

    1. 对于分页展示的情况，可以通过按钮或者其他交互方式实现分页的切换。具体实现也可以根据需求进行调整，这里给出一种基于按钮的实现方案：

    ```javascript const pages = document.querySelectorAll('#box .page'); // 分页元素的选择器，可根据实际情况替换 const pageBtns = document.querySelectorAll('.page-btn'); // 按钮元素的选择器，可根据实际情况替换

    function init() { // 移除所有按钮的样式，并为第一个按钮添加样式表示默认选中 pageBtns[0].classList.add('selected'); for (let i = 1; i < pageBtns.length; i++) { pageBtns[i].classList.remove('selected'); } // 隐藏除第一个分页内容以外的所有分页 for (let i = 1; i < pages.length; i++) { pages[i].classList.remove('selected'); } }

    init();

    // 为每个按钮设置点击事件，以切换分页 for (let j = 0; j < pageBtns.length; j++) { pageBtns[j].addEventListener('click', () => { init(); pageBtns[j].classList.add('selected'); pages[j + 1].classList.add('selected'); }); } ```

    以上给出的仅是一个简单的实现方案，具体实现还要结合实际情况进行调整，并且还能够进一步优化和完善。