页面滚动时隐藏element-ui下拉框/时间弹框

最新推荐文章于 2025-06-06 16:13:57 发布

前端的小小对象

最新推荐文章于 2025-06-06 16:13:57 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/a736755244/article/details/127683625

本文介绍了一种解决在有垂直滚动的后台管理系统中，点击下拉框后因页面滚动导致下拉项遮挡布局的问题。通过在页面滚动或缩放时隐藏下拉项来实现，利用了点击目标元素时下拉项自动隐藏的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

在类后台管理的系统中，当（有垂直滚动时）点击下拉框后滚动页面，会发现下拉项会遮盖住layout
正常页面：
在这里插入图片描述

滚动后：在这里插入图片描述

解决

在页面滚动或者缩放时隐藏下拉项即可（借助点击目标元素，下拉项会自动隐藏的特点）

let mouseUp = null;
let mouseDown = null;

// 隐藏popper
export const hidePopper = function (cls='.el-popper') {
  let dom = document.querySelector(cls);
  if(!dom){
    return;
  }
  // 创建鼠标事件
  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
    });
  }
  // 顺序触发mouseDown、mouseUp
  dom.dispatchEvent(mouseDown);
  dom.dispatchEvent(mouseUp);
}

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

/**
  * 滚动时隐藏
  * @param contain 滚动监听的容器
  * @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');