Vue--ElementUI--隐藏滚动条组件

最新推荐文章于 2024-05-11 10:03:56 发布

NmzI怼怼怼

最新推荐文章于 2024-05-11 10:03:56 发布

阅读量405

点赞数

原文链接：https://www.cnblogs.com/dyy-dida/p/11161272.html

版权

<el-scrollbar>

用来修改滚动条样式

组件名字<el-scrollbar/>

修改默认样式，

#app .page-component__scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}

　一种情况用于高度固定：

<div style="height:600px;">

   <el-scrollbar style="height:100%">

       <div style="width:700px;height:700px;border:solid;" >

         ....... blabla.....

       </div>

   </el-scrollbar>

 </div>

　　一种情况用于高度100%自适应：

<div id="app">

     <div class="left">

         <el-scrollbar class='page-component__scroll'>

             <div class="box">123</div>

         </el-scrollbar>

     </div>

     <div class="right">

         <el-scrollbar class='page-component__scroll'>

             <div class="box">123</div>

         </el-scrollbar>

     </div>

 </div>

　　样式如下：

  html,body{

        height:100%;

    }

    #app{

        height:100%;

        overflow: hidden;

    }

    .left{

        width:200px;

        height:100%;

        background:#f00;

        float:left;

    }

    .right{

        width:300px;

        height:100%;

        background-color:#0f0; 

        float:right;

    }

   .page-component__scroll{

       height:100%;

    }

   .box{

height:900px;

background-color:#000000;

width:200px;

color:#fff;

    }

   .left .page-component__scroll .el-scrollbar__wrap {

     overflow-x: hidden;

    }

转载自 https://www.cnblogs.com/dyy-dida/p/11161272.html