el滚动条标签在vue项目中的使用

标签：<el-scrollbar>

<template>
  <div class="app-container">
      <div class="test">
      
      <!--使用滚动条的主体-->
          <div class="main">
            <el-scrollbar style="height:100%">
              <div class="content">
                <!--内容-->
              </div>
            </el-scrollbar>

          </div>
      </div>
  </div>
</template>
<script>
export default {

}
</script>

<style>
//无关内容
p{
  margin: 0;
  padding: 0;
}
.test{
  position: relative;
  width: 800px;
  height: 600px;
  background-color: aliceblue;
}


//容器的大小设置
.main{
  position: absolute;
  width: 400px;
  height: 400px;  //容器的高度为400px
  top: 50%;
  left: 50%;
  background-color: rgb(176, 224, 208);
  transform: translate(-50%,-50%);
  padding: 10px;
}

//内容的实际高度为800px
.content{
  height: 800px;
  background-color:blueviolet ;
  width: 100%;
}

//若容器出现了浏览器自带的横向滚动条，则将该元素的宽度适当上调
//若容器出现了浏览器自带的纵向滚动条时,将高度适当上调
.el-scrollbar__wrap{
  height: 105%;
}

//滚动条的颜色需要使用背景色设置
.el-scrollbar__thumb{
  background-color: turquoise;
}
</style>

效果图

结构图

main

容器,其大小决定容器的整体大小

el-scrollbar

带滚动条的实际主体，高度通常设为style="height:100%;"其大小为main容器的内容大小（去除边距）

• el-scrollbar由三部分组成：内容主体，水平方向滚动条和垂直方向滚动条

  • el-scrollbar__wrap:存放内容主体

  • el-scrollbar__bar is-horizontal:水平方向滚动条的移动区域（滚动条为其子元素）

  • el-scrollbar__bar is-vertical:垂直方向滚动条的移动区域（滚动条为其子元素）

    

  • 此处白色区域即为滚动条的移动区域（水平方向宽度无需滚动条故只显示了移动区域无滚动条）

    • 可在css中直接添加.el-scrollbar__bar{}选择器修改其样式
    • 修改位置滚动条位置：right/bottom
    • 透明度:opacity
    • background-color:颜色,
    • 边框圆角：borde-radius
    • width：只能修改水平方向滚动条移动区域的长度
    • height：只能修改垂直方向滚动条移动区域的长度

    

    • 修改垂直方向滚动条宽度：

    .el-scrollbar__bar.is-vertical {
          width: 50px;
        }
    

实际效果

• 修改垂直方向滚动条宽度：

  //类名之间无空格
  .el-scrollbar__bar.is-horizontal {
        height: 50px;
      }
  

效果图

注意：消除浏览器自带滚动条

.el-scrollbar__wrap{
  height: 105%;
  width: 105%;
}

el的滚动条使用了绝对定位，调整el-scrollbar__wrap的宽度可以在不移动el滚动条的情况下，将浏览条自带的滚动条"挤出"视图