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>
    
    今天你学习了吗!!!
  • 相关阅读:
    Linux工具[转]
    [C++]线程池 与 [Go] mapreduce
    快手面试代码题
    C++ note
    sudo与用户权限
    service 与 log日志
    tmux-cheatsheet
    [转]Linux下的常见信号总结
    记一个低级错误
    Github个人主页不显示提交记录的问题
  • 原文地址:https://www.cnblogs.com/nayek/p/12425509.html
Copyright © 2011-2022 走看看