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 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
taro开发微信小程序的实践
May 21 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
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
Python 列表理解及使用方法
2017/10/27 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python request使用方法及问题总结
2020/04/26 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
妇科医生自荐信
2013/11/05 职场文书
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
光盘行动倡议书
2014/02/02 职场文书
工程安全生产协议书
2014/11/21 职场文书
预备党员转正意见
2015/06/01 职场文书
保护地球的宣传语
2015/07/13 职场文书