element-ui的滚动条组件el-scrollbar（官方没有）

最新推荐文章于 2023-11-01 17:02:38 发布

指标满载

最新推荐文章于 2023-11-01 17:02:38 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： el-scrollbar 滚动条

本文链接：https://blog.youkuaiyun.com/weixin_44770377/article/details/106296978

本文介绍了如何使用Element-UI中的el-scrollbar组件来自定义滚动条。通过将内容包裹在el-scrollbar内，并设定组件及其外层高度，以及设置.el-scrollbar__wrap的overflow-x为hidden，实现滚动条效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可直接使用<el-scrollbar></el-scrollbar>组件，将需要滚动的内容包在里面。注意要设置el-scrollbar及他外层的高度，以及组件里.el-scrollbar__wrap{
overflow-x: hidden;
}

<template>
  <div >
    <el-drawer title="查看预览" :visible.sync="DialogShow" direction="rtl" size="80%" >
      <el-scrollbar class="scrollbar">
        <div style="background-color: #dcdcdc;padding: 20px 0;">
          <!--标题-->
          <h1 style="text-align: center;">{{form.title}}</h1>
          <!--发布时间和作者-->
          <div style="display: flex;justify-content: space-between;margin: 0 20px;">
            <span>发布时间：{{form.createTime}}</span>
            <span>作者：{{form.author}}</span>
          </div>
        </div>
        <!--正文-->
        <pre  class="preClass" v-html="form.content"></pre>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script>

  export default {
    name:'viewPreview',
    props: {
      form:{
        type: Object,
        default: function () {
          return { }
        }
      }
    },
    data() {
      return {
        DialogShow:true
      }
    },
    methods: {  },
    mounted(){ },
  }
</script>

<style scoped>
  .scrollbar{
    height: calc(100% - 100px);
  }
  .scrollbar /deep/ .el-scrollbar__wrap{
    overflow-x: hidden;
  }
</style>