精华内容
下载资源
问答
  • 为什么要用el-scrollbar,大家都知道,模拟一个滚动不难,而且市面上有很多这样的库。我考虑的,首先项目用的框架是Vue,然后用的组件库是Element,Element官网也有很多滚动,而且像是Select组件的下拉框也是
  • element ui el-scrollbar横向滚动

    千次阅读 2021-02-24 14:14:18
    用过element ui组件库的同学,应该会发现它有一个内置滚动组件,官网对此组件没有相关文档说明 element ui官方文档右侧菜单即采用了该组件,如下图 查看源码,发现有一下props props: { native: Boolean, // ...

    用过element ui组件库的同学,应该会发现它有一个内置滚动组件,官网对此组件没有相关文档说明

    element ui官方文档右侧菜单即采用了该组件,如下图

    查看源码,发现有一下props

    props: {
      native: Boolean,    //  是否使用原生滚动条,即不附加自定义滚动条
      wrapStyle: {},      //  wrap的内联样式
      wrapClass: {},      //  wrap的样式名
      viewClass: {},      //  view的样式名
      viewStyle: {},      //  view的内联样式
      noresize: Boolean,  //  当container尺寸发生变化时,自动更新滚动条组件的状态
      tag: {              //  组件最外层的标签属性
        type: String,
        default: 'div'
      }
    }

    根据html结构,我们发现.el-scrollbar__view元素下的正是我们需要滚动的元素

    经测试,给viewStyle设置white-space: nowrap;样式即可实现横向滚动;

    同理也可以给viewClass设置white-space: nowrap;样式

    展开全文
  • el-scrollbar ref="scroll" @wheel.native.prevent="changeScroll"> …… </el-scrollbar> changeScroll(e) { let wrap = this.$refs.scroll.$refs.wrap wrap.scrollLeft = wrap.scrollLeft - e....
    <el-scrollbar ref="scroll" @wheel.native.prevent="changeScroll">
    	……
    </el-scrollbar>
    
    changeScroll(e) {
      let wrap = this.$refs.scroll.$refs.wrap
      wrap.scrollLeft = wrap.scrollLeft - e.wheelDelta
    }
    
    展开全文
  • el-scrollbar 横向滚动条使用

    千次阅读 2020-12-25 10:40:05
    横向滚动条出现,同时不显示默认的滚动条, 需要在 el-scrollbar__wrap 添加 .el-scrollbar__wrap{ overflow-x: auto; height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式 } 在el-scrollbar 是 ...

    让横向滚动条出现,同时不显示默认的滚动条,
    需要在 el-scrollbar__wrap 添加

    .el-scrollbar__wrap{
      overflow-x: auto;
      height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
    }
    

    在el-scrollbar 是 overflow: hidden; el-scrollbar__view必须是浮动或 display: inline-block 才能出现滚动条

    .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
      white-space: nowrap;
      display: inline-block;
    }
    

    参考 : https://www.cnblogs.com/wangjae/p/10340757.html

    展开全文
  • 在使用vue时,就会有使用到elementUI,之后就是不断的在入坑和天坑之间徘徊。...el-scrollbar></el-scrollbar> 可以参考elementUI的官网代码 这里用F12可以查看到 添加之后会有出现横向滚...

    在使用vue时,就会有使用到elementUI,之后就是不断的在入坑和天坑之间徘徊。

    elementUI中有个隐藏的组件,就是滚动条-----<el-scrollbar></el-scrollbar> 可以参考elementUI的官网代码

    这里用F12可以查看到

    添加之后会有出现横向滚动的样式(很丑)

    这里需要添加一个样式 

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

    有时候会遇到写上去无法作用上去的问题,这时候需要在滚动元素外,自己添加一个元素   

    class或者id + .el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;} 

    之后,再重写下面的样式,就会出现和竖向滚动条一样的样式了,如果遇到无法作用上的问题,解决方法和上面一样 

    class或者id.el-tree>.el-tree-node{display:inline-block;}
     

    转载自 https://blog.csdn.net/fyfy0613/article/details/81480161




    按作者的做法可以隐藏el-scrollbar横向滚动条,在App.vue样式下添加这句:

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

    但会出现下拉框el-select选项被遮挡问题
    el-select选项被遮挡
    此时再加上这句代码就可以解决el-select样式异常:

    .el-select-dropdown .el-scrollbar {padding-bottom: 17px;}
    
    展开全文
  • el-scrollbar显示横向滚动

    千次阅读 2021-03-16 17:13:33
    横向滚动条出现,同时不显示默认的滚动条, 需要在 el-scrollbar__wrap 添加 .el-scrollbar__wrap{ overflow-x: auto; height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式 } 1 2 3 4 在el-...
  • el-scrollbar隐藏横向滚动条一、 在使用el-scrollbar时,即使横向没有超出宽度,下方依然会出现2个三角形的滚动区域箭头,解决办法; 一、 在使用el-scrollbar时,即使横向没有超出宽度,下方依然会出现2个三角形的滚动...
  • .el-scrollbar__wrap{ overflow-x: hidden; } 注意 两个下划线
  • 在学习vue过程中,学习侧边菜单,使用el-scrollbar,需要隐藏横向滚动条 sidebar.scss #app { $sideBarWidth: 220px; $menuBg: #304156; .sidebar-container { ... //隐藏横向滚动条 .el-scrollbar__wrap { ...
  • .el-scrollbar__wrap { overflow-x: hidden; } 注意⚠️: 不要写在scoped内。 如果未生效,给el-scorllbar加一个类名,或注意是否需要加important
  • /deep/.el-scrollbar__wrap { overflow-x: hidden; } 注意,最外层要用父盒子包裹
  • 来源:资料 之前弄过这个,然后就是记不住。在网上找了天资料,怎么都不行 解决办法: 首先:不管你的外层div 是浮动 还是相对定位 绝对定位,都得在el-scrollbar得外层div 设置个高度。...// 上面隐藏横向滚动
  • 隐藏横向滚动条时隐藏不了的解决办法解决办法 解决办法 在遇到这个问题的时候,网上的一些回答都是一样的,都是在style中加上以下样式 .el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;} 但是我使用这个的...
  • /* 解决自定义滚动条 x 轴显示问题 */ .el-scrollbar__wrap { overflow-x: hidden; }
  • el-scrollbar style="width: 100%; height:100%"> <el-row v-for="(item, index) in imageViewList" :key="index" :gutter="3"> <el-col :span="8" v-for="(subItem, subIndex) in 12"> &
  • vue elmentUi el-scrollbar 美化滚动条样式

    千次阅读 2019-05-30 16:07:00
    <template> <div class="home reset"> <!-- bind your configurations --> <div class="scroll"> <el-scrollbar> <!--以下是滚动的内容--> <ul id="app...
  • .el-tree-node>.el-tree-node__children { overflow: hidden; } /*原始*/ .el-tree-node>.el-tree-node__children { overflow: auto; } /*改为*/
  • <el-scrollbar></el-scrollbar> 将会出现滚动的内容放到上述标签内就可以了。 这里要简单的设置一下,将标签的height设为100%...//将横向滚动条隐藏 } /deep/.el-scrollbar__thumb { //可设置滚动条颜.
  • el-scrollbar滚动条不显示解决方法

    千次阅读 2021-01-06 11:16:01
    ## el-scrollbar滚动条不显示解决方法 **对自己遇到的一些问题做一个记录帖,方便以后查询。**
  • 在全局style中给节点文字父元素加padding撑开,然后设overflow为visible即可 .el-tree-node :nth-child(2) { padding: 1px; overflow: visible; }
  • Vue页面<...</template>里部分相关代码。 ...el-scrollbar > <el-tree class="filter-tree no-select" :data="data" node-key="id" ref="tree"> </el-tree> </el-scr
  • element-ui中隐藏组件el-scrollbar的使用element-ui中隐藏组件el-scrollbar的使用一、使用虽然官网没有介绍该组件,但是网上有许多小伙伴扒了源码并提供了使用方法view-class=""wrap-class=""tag="">属性props: {...
  • .el-scrollbar__bar.is-vertical { opacity: 1; }
  • 关于滚动条的使用 1、使用css overflow属性 overflow: scroll; 2、element的el-scrollbar组件 父容器设固定高,el-scrollbar设高为100%,或者给el-scrollbar设固定高 <el-scollbar style="height:100%">...
  • 主要介绍了element的el-table中记录滚动条位置的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • el-scrollbar设置滚动条颜色

    千次阅读 2019-06-06 16:57:07
    /deep/ .table_device { .el-scrollbar__thumb { background-color: #b5bedd; } } /deep/ .table_line { .el-scrollbar__thumb { background-color: #b5bedd; } } <el-scrollbar ref="gcScr...
  • 使用el-scrollbar进行滚动条样式统一。 问题描述: 部分源代码如下图所示:(注:el-table中,height属性放到style里,height没有生效,目前没有找到原因,所以放在外边) <el-table :data="pojoList" v-if=...
  • ElementUI的隐藏组件,官方没放出来,但是可以直接在项目中使用。 重点: 设置外层容器的高度 ...el-scrollbar style="height:100%"> <div> 内容 </div> </el-scrollbar> ..
  • 一、问题如下图,原始表格滚动条很丑 二、想要的效果如下 三、操作步骤 1、template部分代码 <template> <...-- 使用el-scrollbar标签的效果 --> <div class="box"> <!...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 529
精华内容 211
关键字:

el-scrollbar横向滚动