前端Elment resize检测

栏目: JavaScript · 发布时间: 5年前

内容简介：近来有需求要做分页，听起来可能有点Low。所以我要把Low的事情做得有点逼格。分页本身没啥，但是数据量起来了，比如十万。要是不做点处理，那你的页面估计爽得很，机器也爽得很。放心，我不会让你这么爽。比较流行的当然是虚拟滚动（无限滚动）。

近来有需求要做分页，听起来可能有点Low。所以我要把Low的事情做得有点逼格。

分页本身没啥，但是数据量起来了，比如十万。要是不做点处理，那你的页面估计爽得很，机器也爽得很。放心，我不会让你这么爽。

大量数据展现方案

比较流行的当然是虚拟滚动（无限滚动）。

始终展示的是有限的固定节点。
外层创建滚动层。

一句话，就是反复利用固定节点展现数据。

其中还有两个点

何时需要加载新的分页数据

scrollTop , clientHeight, scrollHeight
IntersectionObserver (chrome 55+)

如何知道容器宽高变化

本文就围绕着这个展开

因为使用的是react框架，使用了 react-window , react-window就是用来展现海量数据的react列表组件。

因为项目需要，还要不通尺寸一行展现不同数量的数据。肯定有人就说，监听window.resize。

没错，监听resize一定程度，但是window.resize, 并不能让我知道容器本身的尺寸，当

然可以通过getComputedStyle获取。要是window没有resize的情况呢。

我就想实时的知道尺寸的变化。

尺寸变化监测方案

Cross-Browser, Event-based, Element Resize Detection

这个思路是创建一个 type为text/html的节点，通过监听该节点的resize事件达到目的。

javascript-detect-element-resize

创建三个子元素，利用scroll事件来监测变化。

ResizeObserver

原生自带的方案

resize-observer-polyfill 基于resze和MutationOberver的polyfill

此外

当然，我觉得还有定时器 + getComputedStyle 也是很低成本的实现。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Java专家撰写，力求透彻讲解每个知识点，逐步建立编程知识图谱。本书以Java语言为例，由基础概念入手，到背后实现原理与逻辑，再到应用实践，融会贯通。全书共六大部分，其要点如下。第一部分（第1～2章）讲解计算机程序的基本执行流程与元素，以及数据背后的二进制表示，帮读者掌握编程的基本概念。第二部分（第3～7章）讲解面向对象的编程原理与逻辑，涉及类、继承与多态、接口与抽象类、异......一起来看看《Java编程的逻辑》这本书的介绍吧!

码农工具