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>
    
    今天你学习了吗!!!
  • 相关阅读:
    第十六周博客总结
    第十五周博客总结
    自学第六次博客(动作事件的处理)
    第十四周博客总结
    自学的第五篇博客
    自学电脑游戏第四天(Swing)
    c++面向对象程序设计第四章课后习题
    SQL注入
    VirtualBox+Vagrant环境配置
    测试
  • 原文地址:https://www.cnblogs.com/nayek/p/12425509.html
Copyright © 2011-2022 走看看