場景

在類后臺管理的系統(tǒng)中，當（有垂直滾動時）點擊下拉框后滾動頁面，會發(fā)現(xiàn)下拉項會遮蓋住layout
正常頁面：

滾動后：

解決

• 在頁面滾動或者縮放時隱藏下拉項即可（借助點擊目標元素，下拉項會自動隱藏的特點）

let mouseUp = null;
let mouseDown = null;

// 隱藏popper
export const hidePopper = function (cls='.el-popper') {
  let dom = document.querySelector(cls);
  if(!dom){
    return;
  }
  // 創(chuàng)建鼠標事件
  if (!mouseUp || !mouseDown) {
    console.log('-----create events-----');
    mouseUp = new MouseEvent('mouseup', {
      'view': window,
      'bubbles': true,
      'cancelable': true
    });
    mouseDown = new MouseEvent('mousedown', {
      'view': window,
      'bubbles': true,
      'cancelable': true
    });
  }
  // 順序觸發(fā)mouseDown、mouseUp
  dom.dispatchEvent(mouseDown);
  dom.dispatchEvent(mouseUp);
}

// 清除鼠標事件
export const delEvents = function () {
  console.log('-----delete events-----');
  mouseUp = null;
  mouseDown = null;
}

/**
  * 滾動時隱藏
  * @param contain 滾動監(jiān)聽的容器
  * @param cls 隱藏的元素class:如下拉、時間彈框等
*/
export const scrollHide = function (contain,cls) {
  // 先移除
  if(mouseUp||mouseDown){
    delEvents();
  }
  // 再綁定
  contain.onscroll = function () {
    hidePopper(cls);
  }
}

• 使用

// 在container有滾動時
// 隱藏popper類的組件
scrollHide(document.getElementById('container'),'.popper');
// 隱藏下拉項
scrollHide(document.getElementById('container'),'.el-select-dropdown');
// 隱藏時間彈框
scrollHide(document.getElementById('container'),'.el-date-range-picker');