前端Elment resize检测

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

内容简介：近来有需求要做分页，听起来可能有点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 也是很低成本的实现。

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

查看所有标签

猜你喜欢:

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

码农书籍

《Ruby on Rails实践之路:写给PHP和Java开发者的书》内容简介：Ruby on Rails是基于MVC模式的Web框架，用于开发基于数据库的Web应用。Ruby on Rails中内含了所需的Web服务器WEBrick。该框架配置的数据库除了缺省的MySQL外，还可以是Oracle、SQL Server等其他数据库。《Ruby on Rails实践之路:写给PHP和Java开发者的......一起来看看《Ruby on Rails实践之路》这本书的介绍吧!

码农工具

MD5 加密

MD5 加密工具

HEX HSV 转换工具

HEX HSV 互换工具