JS奇技之利用scroll来监听resize详解-创新互联

前言

大家都知道知道原生的 resize 事件只能作用于 defaultView 即 window 上，那么我们应该通过什么样的方式来监听其他元素的大小改变呢？笔者最近学习发现了一种神奇的方法，通过 scroll 事件来间接实现 resize 事件的监听，本文将对这种方式进行原理的剖析与代码实现。

原理

首先，我们先来看一下 scroll 事件是干嘛的。

The scroll event is fired when the document view or an element has been scrolled.

当文档视图或者元素滚动的时候会触发 scroll 事件。

也就是说元素滚动的时候会触发这个事件，那么什么时候元素会滚动？当元素大于其父级元素，且父级元素允许其滚动的时候，该元素可以进行滚动。换句话说，元素可以滚动意味着父子元素大小不一致，这是这个方法的核心。

那么我们需要让元素大小发生改变时，使得 scrollLeft 或者 scrollTop 发生改变，从而触发 scroll 事件，进一步得知其大小发生了改变。

监听元素变大

元素变大的时候，我们可以看到更多，其内部可滚动区域将慢慢减小，但这并不会造成滚动条位置的改变，但当元素大到让滚动条消失的时候会让 scrollLeft 或者 scrollTop 变成 0，这样我们就知道了元素变大了，因此我们其实只需要 1px 来判断，其图示如下：

监听元素变小

当元素变小的时候，可滚动区域会变大，滚动条的位置其实并不会进行改变，这里采取的做法是，让可滚动区域和父元素成一定的比例一起缩小，让父元素来挤压滚动区域，从而间接改变滚动条 scrollLeft 或者 scrollTop 的大小，文字描述可能不是很清楚，我们看下图：

通过以上两种方式，我们可以就可以获得 resize 事件。

实现

首先，为了不影响原有的元素，我们应当创建一个和要监听元素等大的元素，并对其进行相关操作，然后我们需要两个子元素来分别监听元素变大和元素变小两个情况。因此构造如下的 HTML 结构：

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。