基于vue的滚动条组件之--element隐藏组件滚动条scrollbar使用

在项目中，总是需要用到滚动条，但windows浏览器默认的滚动条是很丑的，为了页面美观，可以考虑优化滚动条样式。 

vue Element UI官方文档上并没有放出滚动条相关的示例说明，但是实际上是有这么一个组件的，可查看源码。

 <el-scrollbar></el-scrollbar>

　　将会出现滚动的内容放到上述标签内就可以了。 
这里要简单的设置一下，将标签的height设为100%，查看效果的时候，会出现一个横向的滚动条，如果你不想要横向的滚动条，使用下面css属性设置就可以只显示竖向滚动条。

.el-scrollbar__wrap {

   overflow-x: hidden;

}

示例使用方法如下：

改变element-ui滚动条设置，的更多相关文章

  1. 关于element ui滚动条使用

    element ui 自带的滚动条使用 在容器的直接外层添加 (需要展现滚动条的那一级) <el-scrollbar style="height:100%"></ ...

  2. element ui datePicker 设置当前日期之前的日期不可选

    pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 } },

  3. element ui设置表格表头高度和每一行的高度

    填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...

  4. element UI表格行高、padding等设置报错问题

    element UI里面表格的行高需要自己调整高度和设置padding,直接写style是不行的,里面有 : 1.row-style (行的 style) 2.header-row-styl   (表 ...

  5. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

  6. 【Element UI】使用问题记录

    [Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...

  7. 普通element ui table组件的使用

    1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

  8. vue加scoped后无法修改样式（无法修改element UI 样式）

    有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...

  9. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

随机推荐

  1. java.lang.ClassCastException: org.springframework.web.filter.CharacterEncodingFilter cannot be cast

    严重: Exception starting filter encodingFilterjava.lang.ClassCastException: org.springframework.web.fi ...

  2. Hive SQL 常用日期

    Hive SQL 常用日期 原文地址:Hive SQL常用日期函数 Hive SQL 常用日期 注意: MM DD MO TU等要大写 已知日期 要求日期 语句 结果 本周任意一天 本周一 selec ...

  3. JMeter 中 HTTP Cookie 管理器的使用

    根据 web 应用的复杂度你可以选择创建两种类型的 JMeter 测试计划:面向点击数的或面向场景的. 创建一个面向点击数的测试计划你需要有中值统计.这些统计要包含你的应用每秒应该处理多少个独立请求的 ...

  4. MapReduce案例一：天气温度

    1.需求 2.思路 3.代码实现 3.1MyWeather 类代码: 这个类主要是用来定义hadoop的配置,在执行计算程序时所需加载的一些类. package com.hadoop.mr.weath ...

  5. 如何将json拼接在url后面当做地址栏参数？

    function param(data) { let url = '' for (var k in data) { let value = data[k] !== undefined ? data[k ...

  6. 亲测能用的mysqli类,挺好用的

    <?php header('content-type:text/html;charset=utf-8'); /* 掌握满足单例模式的必要条件 (1)私有的构造方法-为了防止在类外使用new关键字 ...

  7. FFT模板 生成函数 原根 多项式求逆 多项式开根

    FFT #include<iostream> #include<cstring> #include<cstdlib> #include<cstdio> ...

  8. 如何配置Java环境，包括JDK，Maven等

    下载JDK并安装 搜索JDK,官网立马就出来了,下载之后个人觉得毕竟开发,毕竟这东西不大,C盘稳一点,安装在C盘可以的 配置 右键打开计算机->属性->高级系统设置->高级-> ...

  9. 安卓APP安全测试基础

    学习牛人经验,结合自己的测试,做简单总结: 简介:安卓APP安全测试目前主要覆盖以下方面:1)自身组件安全2)本地敏感数据保护3)web接口安全 一.自身组件安全目前手动.开源或免费工具均能检测此类漏 ...

  10. 680. Valid Palindrome II【Easy】【双指针-可以删除一个字符，判断是否能构成回文字符串】

    Given a non-empty string s, you may delete at most one character. Judge whether you can make it a pa ...