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

淡淡的烟草味﹌ 2023-02-11 10:25 8阅读 0赞

可直接使用`<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementui实现滚动条

这种方式整个table都会跟着移动，包括标题： <template> <el-scrollbar wrapClass="scrollbar-wrap"

向右看齐/ 2023年02月21日 06:41/ 0 赞/ 44 阅读

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

可直接使用`<el-scrollbar></el-scrollbar>`组件，将需要滚动的内容包在里面。注意要设置el-scrollbar及他外层的高度，以及组件里.el-sc

淡淡的烟草味﹌/ 2023年02月11日 10:25/ 0 赞/ 9 阅读

相关 html简单组件（四）：滚动条显示隐藏和更改滚动条样式

html简单组件（四）：滚动条显示隐藏和更改滚动条样式实现效果图： ![在这里插入图片描述][20210106142011538.gif] HTML代码

迷南。/ 2023年01月02日 15:26/ 0 赞/ 244 阅读

相关 Element-ui之ElScrollBar组件滚动条的使用方法

在翻看 element-ui官网的文档时,发现el-scrollbar不会写在文档中。通过阅读源码，scrollbar组件暴露了 native, wrapStyle, wr

一时失言乱红尘/ 2022年11月06日 14:58/ 0 赞/ 563 阅读

相关 element滚动条组件el-scrollbar的使用

element官网文章中没有介绍滚动条的使用方式，但是官方[滚动条源码][Link 1]中有滚动条的样式代码样式效果 ![在这里插入图片描述][20210304141

浅浅的花香味﹌/ 2022年11月05日 06:22/ 0 赞/ 210 阅读

相关 Vue 清除elementUI下拉组件滚动条样式

[element清除el-scrollbar组件的滚动条, 和清除滚动条引发的问题][element_el-scrollbar_ _ _] ![2021020417060

Dear 丶/ 2022年10月27日 13:56/ 0 赞/ 108 阅读

相关 Vue封装滚动条组件(可自定义滚动滚动条速率、颜色等)

<template> <div class="v-scroll-bar" @wheel.pre

不念不忘少年蓝@/ 2022年05月13日 12:16/ 0 赞/ 889 阅读

相关 uniapp如何设置横向滚动，而且没有滚动条

> 设置横向滚动 overflow-x: auto; display: -webkit-box; overflow-y: hidden; > 隐藏横

今天药忘吃喽~/ 2021年07月24日 23:14/ 0 赞/ 1542 阅读

相关 rn 图片组件Image、滚动条组件ScrollView

图片组件 <Image /> 属性: 1、加载本地图片:source={require('路径')} 其中:

淡淡的烟草味﹌/ 2021年07月24日 16:18/ 0 赞/ 796 阅读

相关 uniapp 滚动条组件

<scroll-view scroll-y 开启竖直滚动,默认为false scroll-x 开启水平滚动,默认为false

梦里梦外;/ 2021年07月24日 16:16/ 0 赞/ 1151 阅读