精华内容
下载资源
问答
  • 为什么要用el-scrollbar? 最近在写一个内部平台系统,相信大家都知道,其中会有很多自定义的滚动区域,就比如说现在有一个列表需要滚动,第一个念头就是用 overflow: scroll; 啊!嗯嗯,又不是不能用!如果我不曾...
  • 虽然在官方文档中没有给出这个组件,但是在源码中是有的。所以我们可以直接使用: <el></el> 但是我们需要微调一下样式,两种情况的演示代码如下: ....page-component__scroll .el-scrollbar__wrap { ov
  • el-scrollbar滚动条组件

    2021-10-09 11:34:24
    本篇主要是整理一下element ui找不到的el-scrollbar组件的api,做一个简单的带滚动条的查询工具栏(查询栏表单可自定义插入)。 // 导入组件 import Scrollbar from 'element-ui' const element = { install: ...

    本篇主要是整理一下element ui找不到的el-scrollbar组件的api,做一个简单的带滚动条的查询工具栏(查询栏表单可自定义插入)。

    // 导入组件
    import Scrollbar from 'element-ui'
    
    const element = {
      install: function(Vue) {
        /** 滚动*/
        Vue.use(Scrollbar)
      }
    }
    export default element
    例子:
    <el-scrollbar 
        :native="false" 
        wrap-style="" 
        wrap-class="bg-red" 
        view-class="bg-blue" 
        view-style="color: pink;" 
        :noresize="false" 
        tag="section" >...</el-scrollbar>
    
    写一个滚动区域的组件:
    <template>
      <div class="search-bar-wrap">
        <!-- 滚动区 (具体内容可用插槽自定义加入) -->
        <el-scrollbar
            class="scrollbar-wrapper" 
            view-class="scrollbar-view" 
            :vertical="false" 
        >
            <slot name="view" />
        </el-scrollbar>
      </div>
    </template>
    <script>
    export default {
      name: 'SearchBar'
    }
    </script>
    
    对应的全局scss:
    /* 查询导航栏 */
    .search-bar-wrap { position: relative;width: 100%; }
    .scrollbar-wrapper { 
        background: #F7FAFC;
        border-bottom: 1px solid #C7CBCF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14); 
    }
    .scrollbar-view { display: flex;
      &::after {
        content: "";
        display: block;
        width: 20px;
        height: 1px;
        flex-grow: 0;
        flex-shrink: 0;
      }
    }

     element ui的el-scrollbar有一个人性化的地方,就是只有当容器内容溢出需要滚动且鼠标悬浮在滚动区域时,el-scrollbar才会显示出滚动条,平时滚动条是隐藏的。

    注意1:el-scrollbar的class/css必须是全局样式,view内容中的样式会覆盖掉容器wrap的样式;

    注意2:el-scrollbar本身class不能带padding,不然会出现容器内外两个滚动条。

    el-scrollbar常用属性的理解:
         props: {
            native: Boolean,  // 是否使用本地,设为true则不会启用element-ui自定义的滚动条
            wrapStyle: {},  // 包裹层自定义的样式
            wrapClass: {},  // 包裹层自定义的样式类
            viewClass: {},  // 可滚动部分自定义的样式类
            viewStyle: {},  // 可滚动部分自定义的样式
            noresize: Boolean, // 是否不监听container尺寸变化,如果 container 尺寸不会发生变化,最好设置它可以优化性能
            tag: { type: String, default: 'div' }  // 生成的标签类型,默认使用 `div`标签包裹
        }

     

     

     

    展开全文
  • el-scrollbar 使用以及滚动到指定位置

    万次阅读 2020-06-07 18:56:32
    其实,在 element-UI 中有一个隐藏组件 el-scrollbar ;这个组件的滚动条还是很不错的,比原生的滚动条好看,而且还有一些效果(鼠标移入时显示,移出时隐藏)。 使用 el-scrollbar;以及滚动到指定位置。

    写在前面

    浏览器默认的滚动条样式不是很美观;

    其实,在 element-UI 中有一个隐藏组件 <el-scrollbar>,这个组件的滚动条还是很不错的,比原生的滚动条好看,而且还有一些效果(鼠标移入时显示,移出时隐藏)。

    在这里插入图片描述

    所以,我们直接使用它就省事很多啦~

    开始使用

    <el-scrollbar>
      // 包裹你的内容
    </el-scrollbar>
    

    这个组件还有一些属性值可以传递:(不过一般用不着)

    props: {
      native: Boolean,
      wrapStyle: {}, // 外层盒子的样式
      wrapClass: {}, // 外层盒子的class
      viewClass: {}, // 内层盒子的class
      viewStyle: {}, // 内层盒子的样式
      noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
      tag: {
        type: String,
        default: 'div'
      }
    }
    

    el-scrollbar 将会作为你的容器最外层,也是滚动条的容器;
    一个比较好的使用方式是:el-scrollbar 加上 ref 以及 class 用来定义宽度和高度。

    需要注意的是:el-scrollbar 上定义 maxHeightmaxWidth 将无法实现预期效果。

    滚动到自定义位置

    假设现在滚动条滚到了底部,如果将其滚到我们想要的位置

    <el-scrollbarl ref="scroll">
      // ...
    </el-scrollbar>
    

    可以使用如下代码:

    this.$refs['scroll'].wrap.scrollTop = 0  //想滚到哪个高度,就写多少
    

    为了让整个滚动更加丝滑,我们再加上滚动动画:

    <el-scrollbarl ref="scroll">
      // ...
    </el-scrollbar>
    <el-button @click="toTop">滚动到顶部</el-button>
    
    <script>
    const cubic = value => Math.pow(value, 3);
    const easeInOutCubic = value => value < 0.5
      ? cubic(value * 2) / 2
      : 1 - cubic((1 - value) * 2) / 2;
    //...
    methods: {
      toTop() {
        // el-scrollbar 容器
        const el = this.$refs['scroll'].wrap;
        
        const beginTime = Date.now();
        const beginValue = el.scrollTop;
        const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
        const frameFunc = () => {
          const progress = (Date.now() - beginTime) / 500;
          if (progress < 1) {
            el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
            rAF(frameFunc);
          } else {
            el.scrollTop = 0;
          }
        };
        rAF(frameFunc);
      }
    }
    //...
    </script>
    

    动态滚动条

    内容高度小于100px 的时候,区域随内容高度自适应;内容高度大于 100px 时显示滚动条。

    <el-scrollbar ref="scroll" :style="{height: getHeight()}">
      <div v-for="item of dataList">
    	//...
      </div>
    </el-scrollbar>
    
    <script>
    //...
    methods: {
      getHeight() {
    	if(this.dataList.length>5) {
    	  return '100px'
    	} else {
    	  return 'auto'
    	}
      }
    }
    //...
    </script>
    

    -----------------(正文完)------------------

    前端学习交流群,想进来面基的,可以加群:
    Vue学习交流 React学习交流
    或者手动search群号:685486827832485817


    写在最后: 约定优于配置 —— 软件开发的简约原则
    -------------------------------- (完)--------------------------------------

    我的:
    个人网站: https://neveryu.github.io/neveryu/
    Github: https://github.com/Neveryu
    新浪微博: https://weibo.com/Neveryu

    更多学习资源请关注我的新浪微博…

    展开全文
  • Vue页面<...</template>里部分相关代码。 ...el-scrollbar > <el-tree class="filter-tree no-select" :data="data" node-key="id" ref="tree"> </el-tree> </el-scr

    Vue页面<template lang="html"></template>里部分相关代码。

    示例代码:

    <div id="listTree" class="list-tree-div">
    	<el-scrollbar >
    		<el-tree class="filter-tree no-select" :indent="10" :data="data" node-key="id" ref="tree">
    		</el-tree>
    	</el-scrollbar >
    </div>

    Vue页面<style lang="scss"></style>里部分相关代码。

    示例代码:

        .list-tree-div {
    		width: 232px;
    		overflow: auto;
    		background: none;
    		flex-grow: 1;
    		display: flex;
    		.el-scrollbar {
    			display: flex;
    			padding: 2.6px 16px 16px 0;
    			width: 232px;
    			.el-scrollbar__wrap {
    				overflow-x: hidden;
    				overflow-y: auto;
    				min-width: 250px;
    				.el-tree.filter-tree {
    					.el-tree-node{
    						> .el-tree-node__content{
    							/* 让纵向滚动条与内容最右边界限之间留有8px的宽度,使效果更好看。 */
    							padding: 0 8px 0 0;
    							.el-tree-node__expand-icon{
    								margin:-2 0 0 3px;
    								padding: 0;
    							}
    							> label.el-checkbox{
    								margin-right: 4px;
    								margin-bottom: 0px;
    								font-size: 12px;
    							}
    							.el-tree-node__label {
    								font-size: 12px;
    								line-height: 12px;
    							}
    						}
    						
    						.el-tree-node__children{
    							/* 出现横轴滚动条 */
    							display: inline-block;
    							min-width: 100%;
    						}
    						
    					}
    				}
     
    			}
    			.el-scrollbar__bar {
    				&.is-horizontal{
    					bottom:0;
    				}
    				&.is-vertical{
    					right:0;
    				}
    			}
    		}
    	}

    展开全文
  • el-scrollbar 组件 当组件中内容过多时,展开后会产生滚动条影响外部整体样式,这个时候需要将滚动条放在组件内部,不让其变化影响其他组件。el-scrollbar可以实现这个功能 el-scrollbar实现菜单内部滚动条 <el-...

    el-scrollbar 组件

    当组件中内容过多时,展开后会产生滚动条影响外部整体样式,这个时候需要将滚动条放在组件内部,不让其变化影响其他组件。el-scrollbar可以实现这个功能

    el-scrollbar实现菜单内部滚动条

    <el-scrollbar style="height:100%;">
            <el-menu
              class="sidebar-el-menu"
              default-active="1-4-1"
              @open="handleOpen"
              @close="handleClose"
              :collapse="isCollapse"
              unique-opened
              router
            >
     </el-scrollbar>
    

    注意:
    外部组件是有高度的,el-scrollbar可以直接设置为占满高度

    style="height:100%;"
    

    横向也可能会有滚动条产生,el-scrollbar需要设置为超出部分隐藏
    el-scrollbar__wrap为其内部样式

    /* 覆盖scrollbar中 overflow: scroll; 会导致横向滚动条*/
    .el-scrollbar__wrap {
        overflow: hidden;
    }
    

    效果

    调整前,会挤边
    在这里插入图片描述

    调整后,内部滚动条
    在这里插入图片描述

    展开全文
  • 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-scrollbar 是 overflow: hidden; el-scrollbar__...
  • 控制好最外层div的高度,然后设置el-scrollbar高度为100%,div内部的三个el-table的总高度要溢出,不然也不会显示滚动条了。
  • 使用el-scrollbar进行滚动条样式统一。 问题描述: 部分源代码如下图所示:(注:el-table中,height属性放到style里,height没有生效,目前没有找到原因,所以放在外边) <el-table :data="pojoList" v-if=...
  • 当使用el-scrollbar的时候,比如你的数据列表是后端获取的,这时候,初始化的时候,因为数据还没有获取 到,导致里面的内容没有撑开,所以滚动条是不显示的,但是可以正常滚动,所以解决办法是在获取到列表的时候,...
  • 一、问题如下图,原始表格滚动条很丑 二、想要的效果如下 三、操作步骤 1、template部分代码 <template> <...-- 使用el-scrollbar标签的效果 --> <div class="box"> <!...
  • element-ui中隐藏组件el-scrollbar的使用element-ui中隐藏组件el-scrollbar的使用一、使用虽然官网没有介绍该组件,但是网上有许多小伙伴扒了源码并提供了使用方法view-class=""wrap-class=""tag="">属性props: {...
  • 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"> &
  • el-scrollbar隐藏横向滚动条一、 在使用el-scrollbar时,即使横向没有超出宽度,下方依然会出现2个三角形的滚动区域箭头,解决办法; 一、 在使用el-scrollbar时,即使横向没有超出宽度,下方依然会出现2个三角形的滚动...
  • el-scrollbar 使用说明

    千次阅读 2019-12-13 09:57:29
    el-scrollbar element-ui 的滚动条组件 ,官方文档上面是没有介绍这个组件的。 效果图: 简单使用: <template> <div style="height:768px;"> <el-scrollbar style="height:100%"> ...
  • element-ui之el-scrollbar源码解析学习

    千次阅读 2018-12-06 15:56:00
    div.el-scrollbar__wrap是实际上真正用来包裹内容并产生滚动条的容器,高度100%,div.el-scrollbar__view里面就是我们自己写的需要滚动的内容。 .el-scrollbar__wrap{ overflow: scroll; height: 100%; } ...
  • 展示 源码 <template> <div style="padding: 50px;"> ...el-scrollbar ref="scrollbar" style="height: 500px;...p v-for="item in 200" :key="item" class="scrollbar-demo-item">{{ item }}</p&g
  • el-scrollbar> <div v-for="item in 100">{{item}}</div> </el-scrollbar> </div> // css .box{ height: 200px; // 最外层要设置盖度,才能限制它出滚动条呀 } .el-scrollbar{ h
  • 这里写自定义目录标题element ui文档没有的组件信息(el-scrollbar)文档源码中的参数(props)文档源码中的解析文档源码中的样式分析(若默认滚动条显示,鼠标滚轮无法实现滚动看这里思考) element ui文档没有的...
  • element-ui的滚动条组件el-scrollbar+el-timeline滚动到底部分页刷新 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 html: <div class="content_left"> <...
  • Element UI 修改el-scrollbar 里面的 el-scrollbar__wrap 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条,请添加css(.el-scrollbar__wrap{overflow-x:hidden;}) 或者 直接...
  • .el-scrollbar__wrap{ overflow-x: hidden; } 注意 两个下划线
  • element ui el-scrollbar横向滚动

    千次阅读 2021-02-24 14:14:18
    tag: { // 组件最外层的标签属性 type: String, default: 'div' } } 根据html结构,我们发现.el-scrollbar__view元素下的正是我们需要滚动的元素 经测试,给viewStyle设置white-space: nowrap;样式即可实现横向...
  • ElementUI的隐藏组件,官方没放出来,但是可以直接在项目中使用。 重点: 设置外层容器的高度 ...el-scrollbar style="height:100%"> <div> 内容 </div> </el-scrollbar> ..
  • Element-ui el-scrollbar 源码解析

    千次阅读 2019-05-01 14:16:06
    记得Element-ui源码中有名为 el-scrollbar 的滚动组件,虽然文档上没有提到,但使用的人还是不少。今天记录下源码的阅读心得。 在这之前 在看苦涩的代码前,先大概描述一下滚动条组件的用处和行为,方便理解代码逻辑...
  • el-scrollbar是element ui的滚动条,它的底层代码里面有两个方法,一个是unpdate(),一个是handleScroll()。具体可以参考https://blog.csdn.net/weixin_34025051/article/details/92508359 它原本是随着页面的长度...
  • 由于element-ui官网的文档,没有el-scrollbar的文档描述,在公司接手项目看到之前的同事用了这个就学习了一下。 通过百度试用了几种方法最后就只有一种是有用的,也是最最简单的。 <el-scrollbar class="scroll-...
  • el-scrollbar:Element UI隐藏组件。 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条,添加overflow-x:hidden; 源代码 // reference ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,358
精华内容 1,743
关键字:

el-scrollbar