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 相关文章推荐
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
JavaScript函数基础详解
Feb 03 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
基于Vue开发数字输入框组件
2017/12/19 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python实现基本线性数据结构
2016/08/22 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
暑期社会实践感言
2014/02/25 职场文书
网络管理专业求职信
2014/03/15 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
责任书范本
2014/08/25 职场文书
感谢信的格式
2015/01/21 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
nginx日志格式分析和修改
2022/04/28 Servers