elementui的滚动条出现两个滚动条(elementui 滚动)

在使用 Element UI 开发项目时，有时会遇到滚动条重复显示的问题，即在一个元素中出现了两个滚动条。这通常是由于父元素和子元素都设置了滚动属性导致的。本文将介绍几种解决该问题的方法，并提供相应的代码示例。

1. 确定滚动区域

首先，需要明确哪个元素需要滚动，哪个元素不需要滚动。通常情况下，只需要一个元素具有滚动功能即可。

示例代码

假设我们有一个 el-scrollbar 组件，我们需要确保只有它具有滚动功能：

html

  <div class="container">
    
      <div class="content">
        <!-- 内容部分 -->
      </div>
    
  </div>
</p>


.container {
  height: 100%;
  overflow: hidden; /* 防止容器本身出现滚动条 */
}

.content {
  height: 100%; /* 确保内容高度与容器一致 */
}


<p>

2. 调整 CSS 样式

通过调整 CSS 样式，可以避免不必要的滚动条出现。确保只有需要滚动的元素设置 overflow: auto 或 overflow: scroll。

示例代码

html

  <div class="container">
    
      <div class="content">
        <!-- 内容部分 -->
      </div>
    
  </div>
</p>


.container {
  height: 100%;
  overflow: hidden; /* 防止容器本身出现滚动条 */
}

.el-scrollbar {
  height: 100%; /* 确保滚动条组件高度与容器一致 */
  overflow-y: auto; /* 设置垂直滚动 */
}

.content {
  height: 100%; /* 确保内容高度与滚动条组件一致 */
}


<p>

3. 使用 max-height 属性

如果内容的高度是动态变化的，可以使用 max-height 属性来限制高度，从而避免滚动条重复出现。

示例代码

html

  <div class="container">
    
      <div class="content">
        <!-- 动态内容部分 -->
      </div>
    
  </div>
</p>


.container {
  height: 100%;
  overflow: hidden; /* 防止容器本身出现滚动条 */
}

.el-scrollbar {
  max-height: 100%; /* 设置高度 */
  overflow-y: auto; /* 设置垂直滚动 */
}

.content {
  max-height: 100%; /* 确保内容的高度与滚动条组件一致 */
}


<p>

4. 使用 v-bind 动态绑定样式

如果需要根据某些条件动态调整滚动条的行为，可以使用 v-bind 绑定样式。

示例代码

html

  <div class="container">
    
      <div class="content">
        <!-- 动态内容部分 -->
      </div>
    
  </div>
</p>


export default {
  data() {
    return {
      containerHeight: '100%',
      contentHeight: '100%'
    };
  },
  methods: {
    adjustHeight() {
      // 根据某些条件调整高度
      this.containerHeight = '80%';
      this.contentHeight = '80%';
    }
  },
  mounted() {
    this.adjustHeight();
  }
};



.container {
  overflow: hidden; /* 防止容器本身出现滚动条 */
}

.el-scrollbar {
  overflow-y: auto; /* 设置垂直滚动 */
}


<p>

通过以上几种方法，可以有效解决 Element UI 中滚动条重复出现的问题。希望这些解决方案对您有所帮助。