页面滚动时隐藏el-select下拉框(vue+element)

在Vue.js配合Element UI开发时，如果你想要实现在页面滚动时隐藏`el-select`组件的下拉菜单，你可以使用`@scroll`事件和元素的高度计算来动态控制。首先，确保你的`el-select`有`.el-select-dropdown`这个CSS类关联到它的下拉部分。然后，添加如下的Vue组件内脚本：

<template>
  <div ref="selectContainer">
    <el-select v-model="selectedValue" @scroll.native.prevent>
      <!-- select options -->
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
    };
  },
  mounted() {
    this.$refs.selectContainer.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const dropdownHeight = this.$refs.selectDropdown.offsetHeight;
      const scrollTop = this.$refs.selectContainer.scrollTop;

      if (scrollTop + this.$refs.selectContainer.clientHeight >= dropdownHeight) { // 当滚动到底部时
        this.$refs.selectDropdown.style.maxHeight = '0'; // 隐藏下拉框
      } else {
        this.$refs.selectDropdown.style.maxHeight = null; // 显示下拉框
      }
    },
  },
  beforeDestroy() {
    this.$refs.selectContainer.removeEventListener('scroll', this.handleScroll); // 移除监听
  },
};
</script>
<style scoped>
.el-select-dropdown {
  /* 如果你的下拉框有自己的CSS选择器，替换为对应的 */
  .el-select-dropdown {
    max-height: 0; /* 初始状态隐藏下拉框 */
  }
</style>

这里的关键在于`handleScroll`方法，当用户滚动到`selectContainer`的底部时，设置下拉菜单的最大高度为0，使其不可见。当你向上滚动时，下拉菜单会恢复默认样式。