JS奇技之利用scroll來監(jiān)聽resize詳解

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

.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%;
}

/**
 * 重置觸發(fā)器
 * @param element 要處理的元素
 */
const resetTrigger = function(element) {
 const trigger = element.__resizeTrigger__; // 要重置的觸發(fā)器
 const expand = trigger.firstElementChild; // 第一個(gè)子元素，用來監(jiān)聽變大
 const contract = trigger.lastElementChild; // 最后一個(gè)子元素，用來監(jiān)聽變小
 const expandChild = expand.firstElementChild; // 第一個(gè)子元素的第一個(gè)子元素，用來監(jiān)聽變大

 contract.scrollLeft = contract.scrollWidth; // 滾動(dòng)到最右
 contract.scrollTop = contract.scrollHeight; // 滾動(dòng)到最下
 expandChild.style.width = expand.offsetWidth + 1 + 'px'; // 保持寬度多1px
 expandChild.style.height = expand.offsetHeight + 1 + 'px'; // 保持高度多1px
 expand.scrollLeft = expand.scrollWidth; // 滾動(dòng)到最右
 expand.scrollTop = expand.scrollHeight; // 滾動(dòng)到最右
};

/**
 * 檢測觸發(fā)器狀態(tài)
 * @param element 要檢查的元素
 * @returns {boolean} 是否改變了大小
 */
const checkTriggers = function(element) {
 // 寬度或高度不一致就返回true
 return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
};

/**
 * 添加大小更改監(jiān)聽
 * @param element 要監(jiān)聽的元素
 * @param fn 回調(diào)函數(shù)
 */
export const addResizeListener = function(element, fn) {
if (isServer) return; // 服務(wù)器端直接返回
 if (attachEvent) { // 處理低版本ie
 element.attachEvent('onresize', fn);
 } else {
if (!element.__resizeTrigger__) { // 如果沒有觸發(fā)器
  if (getComputedStyle(element).position === 'static') {
  element.style.position = 'relative'; // 將static改為relative
  }
createStyles();
  element.__resizeLast__ = {}; // 初始化觸發(fā)器最后的狀態(tài)
  element.__resizeListeners__ = []; // 初始化觸發(fā)器的監(jiān)聽器

  const resizeTrigger = element.__resizeTrigger__ = document.createElement('div'); // 創(chuàng)建觸發(fā)器
  resizeTrigger.className = 'resize-triggers';
  resizeTrigger.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
  element.appendChild(resizeTrigger); // 添加觸發(fā)器

  resetTrigger(element); // 重置觸發(fā)器
  element.addEventListener('scroll', scrollListener, true); // 監(jiān)聽滾動(dòng)事件

  /* Listen for a css animation to detect element display/re-attach */
  // 監(jiān)聽CSS動(dòng)畫來檢測元素顯示或者重新添加
  if (animationStartEvent) { // 動(dòng)畫開始
  resizeTrigger.addEventListener(animationStartEvent, function(event) { // 增加動(dòng)畫開始的事件監(jiān)聽
   if (event.animationName === RESIZE_ANIMATION_NAME) { // 如果是大小改變事件
   resetTrigger(element); // 重置觸發(fā)器
   }
  });
  }
 }
 element.__resizeListeners__.push(fn); // 加入該回調(diào)
 }
};

/**
 * 移除大小改變的監(jiān)聽
 * @param element 被監(jiān)聽的元素
 * @param fn 對(duì)應(yīng)的回調(diào)函數(shù)
 */
export const removeResizeListener = function(element, fn) {
if (attachEvent) { // 處理ie
 element.detachEvent('onresize', fn);
 } else {
 element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1); // 移除對(duì)應(yīng)的回調(diào)函數(shù)
 if (!element.__resizeListeners__.length) { // 如果全部時(shí)間被移除
  element.removeEventListener('scroll', scrollListener); // 移除滾動(dòng)監(jiān)聽
  element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__); // 移除對(duì)應(yīng)的觸發(fā)器，但保存下來
 }
 }
};