zoukankan      html  css  js  c++  java
  • Element-UI 隐藏组件之 el-scrollbar

    虽然在官方文档中没有给出这个组件,但是在源码中是有的。所以我们可以直接使用:

    <el-scrollbar></el-scrollbar>
    

    例子一:

    <template>
      <div style="height:600px;">
        <el-scrollbar style="height:100%">
            <div style="700px;height:700px;border:solid;" >
              ....... blabla.....
            </div>
        </el-scrollbar>
      </div>
    </template>
    

    在使用时要设置外层容器高度。并且要设置el-scrollbar 的高度为100%

    .el-scrollbar__wrap{
      overflow-x: hidden;
    }
    

    例子二:但是我们需要微调一下样式,两种情况的演示代码如下:

    已知内容高度

    <div style='height:800px'>
    <el-scrollbar class='page-component__scroll'></el-scrollbar>
    <div>
    <style>
    .page-component__scroll{
        height: 100%;
    }
    .page-component__scroll .el-scrollbar__wrap {
        overflow-x: auto;
    }
    <style>
    

    高度由内容撑开

    <html>
        <body>
            <div style='height:100%'>
                <el-scrollbar class='page-component__scroll'></el-scrollbar>
            <div>
        </body>
    </html>
    
    <style>
    html,body{
        height:100%
        overflow:hidden; /*有效防止在页面进行手动刷新时显示内置滚动条*/
    }
    .page-component__scroll{
        height: 100%;
    }
    .page-component__scroll .el-scrollbar__wrap {
        overflow-x: auto;
    }
    <style>
    
    今天你学习了吗!!!
  • 相关阅读:
    MapReduce1.x与MapReduce2.x差异
    刷题60—排序数组
    刷题59— 圆圈中最后剩下的数字
    刷题58—地图分析
    刷题57—单词的压缩编码
    刷题56—卡牌分组
    刷题55—车的可用捕获量
    刷题54—三维形体的表面积
    刷题53—按摩师
    刷题52—链表的中间结点
  • 原文地址:https://www.cnblogs.com/nayek/p/12425509.html
Copyright © 2011-2022 走看看