• 关于element ui滚动条使用


     element ui 自带的滚动条使用

    在容器的直接外层添加 (需要展现滚动条的那一级)

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

    如果

    注意添加样式  height:100%

    另外添加全局的样式

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

    实例:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
        <style>
        .el-scrollbar__wrap{
          overflow-x: hidden;
        }
      </style>
    </head>
    <body>
      <div id="app">
      <div style="height:400px;">
        <el-scrollbar style="height:100%">
            <div style="700px;height:700px;border:solid;" >
              ....... blabla.....
            </div>
        </el-scrollbar>
      </div>
      </div>
    </body>
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return { visible: false }
          }
        })
      </script>
    </html>
  • 相关阅读:
    今年暑假不AC
    Java类的生命周期
    Java反射机制
    Java环境变量的配置及使用
    javaIO流(一)
    ftp服务器测试
    linux下svn使用及查看杀掉进程
    网络配置学习
    网络配置指令
    dos攻击与防御
  • 原文地址:https://www.cnblogs.com/pengfei25/p/11708082.html
Copyright © 2020-2023  润新知