element-ui中的el-scrollbar,操作滚动条

最新推荐文章于 2024-08-15 09:43:14 发布

一月清辉

最新推荐文章于 2024-08-15 09:43:14 发布

阅读量1.9w

点赞数 2

分类专栏： Vue 文章标签： vue el-scrollbar

本文链接：https://blog.csdn.net/yiyueqinghui/article/details/89714124

版权

Vue 专栏收录该内容

74 篇文章 5 订阅

订阅专栏

<template>
    <div id="test" style="height:500px;">
      <el-scrollbar
        style="height:100%"
        :wrap-class="wrapClass"
        :wrap-style="wrapStyle"
        :view-class="viewClass"
        :view-style="viewStyle"
        :native="native"
        :tag="tag"
        :noresize="noresize"
      >
        <ul>
          <li v-for="item in 100">{{item}}</li>
        </ul>
      </el-scrollbar>
      <p class="red">注意:出现横向滚动条时,可在css中直接添加样式 
        .el-scrollbar__wrap{ overflow-x:hidden; }   
        或者在wrapClass设置 overflow-x:hidden   
        </p>
      <p class="red">注意: 1,滚动窗口高度必须固定,el-scrollbar设置height:100%</p>
      <p class="red">注意: 2,样式,style全局的,不能有scoped,否则不起作用</p>

    </div>
</template>

<script>
  export default {
    data(){
      return {
        //滚动区域层class
        wrapClass:{
          wrapClass:true
        },
        wrapStyle:{
          fontWeight:800
        },

        //滚动整体区域的class
        viewClass:{
          viewClass:true
        },
        viewStyle:{
          border:'1px solid #000000',
          boxSizing:'border-box'
        },
        // native属性：如果为true就不显示el的bar，也就是el模拟出来的滚动条，如果为false就显示模拟的滚动条
        native:false,
        // tag 渲染出来的标签
        tag:'section',
        // noresize 是否刷新滚动条大小
        noresize:true

      }
    }

  }
</script>

<style>
   *{
     margin: 0;
     padding:0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
   ul li{
     text-align: center;
     margin:20px 0;
   }
   .wrapClass{
     color:red;
     overflow-x: hidden;
   }
   .viewClass{
     background:#f5dab1;
   }
   .red{
     color:red;
   }
</style>

在这里插入图片描述