JS奇技之利用scroll来监听resize详解


Posted in Javascript onJune 15, 2017

前言

大家都知道知道原生的 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 来判断,其图示如下:

JS奇技之利用scroll来监听resize详解

监听元素变小

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

JS奇技之利用scroll来监听resize详解

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

实现

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

<div class="resize-triggers">
 <div class="expand-trigger">
 <div></div>
 </div>
 <div class="contract-trigger"></div>
</div>

他们对应的 CSS 如下:

.resize-triggers {
 visibility: hidden;
 opacity: 0;
}

.resize-triggers,
.resize-triggers > div,
.contract-trigger:before {
 content: " ";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 overflow: hidden;
}

.resize-triggers > div {
 overflow: auto;
}

.contract-triggers:before {
 width: 200%;
 height: 200%;
}

其中 .expand-triggers 的子元素宽高应当保持大于父元素 1px,且两个触发器都应当保持在最右下角的状态,因此我们可以实现如下的状态重置函数,并在初始化和每次滚动事件的时候调用:

/**
 * 重置触发器
 * @param element 要处理的元素
 */
const resetTrigger = function(element) {
 const trigger = element.__resizeTrigger__; // 要重置的触发器
 const expand = trigger.firstElementChild; // 第一个子元素,用来监听变大
 const contract = trigger.lastElementChild; // 最后一个子元素,用来监听变小
 const expandChild = expand.firstElementChild; // 第一个子元素的第一个子元素,用来监听变大

 contract.scrollLeft = contract.scrollWidth; // 滚动到最右
 contract.scrollTop = contract.scrollHeight; // 滚动到最下
 expandChild.style.width = expand.offsetWidth + 1 + 'px'; // 保持宽度多1px
 expandChild.style.height = expand.offsetHeight + 1 + 'px'; // 保持高度多1px
 expand.scrollLeft = expand.scrollWidth; // 滚动到最右
 expand.scrollTop = expand.scrollHeight; // 滚动到最右
};

我们可以用如下函数检测元素大小是否发生了改变:

/**
 * 检测触发器状态
 * @param element 要检查的元素
 * @returns {boolean} 是否改变了大小
 */
const checkTriggers = function(element) {
 // 宽度或高度不一致就返回true
 return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
};

最终,我们可以实现简单的事件监听的添加:

/**
 * 添加大小更改监听
 * @param element 要监听的元素
 * @param fn 回调函数
 */
export const addResizeListener = function(element, fn) {
if (isServer) return; // 服务器端直接返回
 if (attachEvent) { // 处理低版本ie
 element.attachEvent('onresize', fn);
 } else {
if (!element.__resizeTrigger__) { // 如果没有触发器
  if (getComputedStyle(element).position === 'static') {
  element.style.position = 'relative'; // 将static改为relative
  }
createStyles();
  element.__resizeLast__ = {}; // 初始化触发器最后的状态
  element.__resizeListeners__ = []; // 初始化触发器的监听器

  const resizeTrigger = element.__resizeTrigger__ = document.createElement('div'); // 创建触发器
  resizeTrigger.className = 'resize-triggers';
  resizeTrigger.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
  element.appendChild(resizeTrigger); // 添加触发器

  resetTrigger(element); // 重置触发器
  element.addEventListener('scroll', scrollListener, true); // 监听滚动事件

  /* Listen for a css animation to detect element display/re-attach */
  // 监听CSS动画来检测元素显示或者重新添加
  if (animationStartEvent) { // 动画开始
  resizeTrigger.addEventListener(animationStartEvent, function(event) { // 增加动画开始的事件监听
   if (event.animationName === RESIZE_ANIMATION_NAME) { // 如果是大小改变事件
   resetTrigger(element); // 重置触发器
   }
  });
  }
 }
 element.__resizeListeners__.push(fn); // 加入该回调
 }
};

以及如下的函数来移除事件监听:

/**
 * 移除大小改变的监听
 * @param element 被监听的元素
 * @param fn 对应的回调函数
 */
export const removeResizeListener = function(element, fn) {
if (attachEvent) { // 处理ie
 element.detachEvent('onresize', fn);
 } else {
 element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1); // 移除对应的回调函数
 if (!element.__resizeListeners__.length) { // 如果全部时间被移除
  element.removeEventListener('scroll', scrollListener); // 移除滚动监听
  element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__); // 移除对应的触发器,但保存下来
 }
 }
};

其他

其中有部分内容是用来优化的,并不影响基础功能,如对服务器渲染、客户端渲染的区分,对 IE 的特殊处理,以及通过 opacity 的动画来解决 chrome 上的bug。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
package.json文件配置详解
Jun 15 #Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 #Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 #Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 #Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 #Javascript
详解vue跨组件通信的几种方法
Jun 15 #Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 #Javascript
You might like
第十四节--命名空间
2006/11/16 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
解析php中const与define的应用区别
2013/06/18 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
Python 解析XML文件
2009/04/15 Python
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
python感知机实现代码
2019/01/18 Python
python3 深浅copy对比详解
2019/08/12 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
在python shell中运行python文件的实现
2019/12/21 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
大学迎新标语
2014/06/26 职场文书
借款协议书
2014/09/16 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
维稳承诺书
2015/01/20 职场文书
2015年派出所工作总结
2015/04/24 职场文书
科技活动总结范文
2015/05/11 职场文书
7个关于Python的经典基础案例
2021/11/07 Python