zoukankan      html  css  js  c++  java
  • 关于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>
  • 相关阅读:
    Hibernate的检索
    Java 多线程
    可信软件开发
    Linux复习3
    Linux复习2
    Linux复习1
    使用Sourcetree(for windows)建立github同步仓库
    Session技术
    Cookie技术
    Ajax技术
  • 原文地址:https://www.cnblogs.com/pengfei25/p/11708082.html
Copyright © 2011-2022 走看看