当前位置: 首页 > news >正文

element ui 的滚动条,Element UI 文档中没有被提到的滚动条

element ui 的滚动条,Element UI 文档中被提到的滚动条

Element UI 官网中有用到自定义的滚动条组件,但是发布的所有版本中都不曾提及,个中原因我们不得而知,不过我们还是可以拿过来引用到自己的项目中。

 使用的时候,

放在 <el-scrollbar></el-scrollbar> 标签内即可

如:

 <el-scrollbar class="jjy-scroll"> <p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p>
</el-scrollbar>

发现底部出现横向滚动条,

 问题大概在于 
<el-scrollbar></el-scrollbar> 
上的 height: 100% 与 margin-bottom 同时显示

 直接用 overflow-x:hidden  隐藏:

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

PS:通过阅读源码,可以看到暴露的几个属性

props: {native: Boolean,    // 使用原生滚动条wrapStyle: {},      // 包裹层wrapClass: {},viewClass: {},      // 内容层viewStyle: {},noresize: Boolean,  // 如果 container 尺寸不会发生变化,最好设置它可以优化性能tag: {              // 编译后生成的标签,默认 `div`type: String,default: 'div'}},

所以,前面的代码可以插入这些属性

<div style="height:100%"><el-scrollbar:native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" noresize="false" tag="section"><router-view/></el-scrollbar></div>

 

 

 

 

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover,minimum-scale=1,maximum-scale=1,user-scalable=no,"><meta name="renderer" content="webkit"><meta name="imagemode" content="force"><title>JJYUI-PC首页</title><meta name="keywords" content="JJYUI-PC首页"><meta name="description" content="JJYUI-PC首页"><link rel="stylesheet" href="./StaticFile/js/common/element-ui2.15.12/element-ui2.15.12.css" /><link rel="stylesheet" href="./StaticFile/css/common/iconfont/iconfont.css" /><link rel="stylesheet" href="./StaticFile/css/common/conmm.css" /><script src="./StaticFile/js/common/vueIEbug2/browser.min.js"></script><script src="./StaticFile/js/common/vueIEbug2/polyfill.min.js"></script><script src="./StaticFile/js/common/IeOutTips/IeOutTips.js"></script><script src="./StaticFile/js/common/vue2.6.14.min.js"></script><script src="./StaticFile/js/common/axios1.2.2.min.js"></script><script src="./StaticFile/js/common/element-ui2.15.12/element-ui2.15.12.js"></script><style>.jjy-scroll {width: 500px;height: 300px;border: #c1c1c1 1px solid;background-color: antiquewhite;overflow-x: hidden;overflow-y: hidden;}.jjy-scroll .el-scrollbar__wrap{overflow-x: hidden;}</style>
</head><body><div id="jjyBox"><el-button type="primary" icon="el-icon-search">搜索</el-button> <br /><br /><br /><el-scrollbar class="jjy-scroll"><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p><p>1111111111111</p><p>2222222222222</p><p>3333333333333</p></el-scrollbar></div><script>var jjyBoxObj = new Vue({el: '#jjyBox',data: {},created: function () {},methods: {}});</script>
</body></html>

效果


最后附上官方github地址:

https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js

element/main.js at dev · ElemeFE/element · GitHub

文章核心内容摘录:

Element UI 中被隐藏的滚动条 - osc_khbto5ni的个人空间 - OSCHINA - 中文开源技术交流社区


https://www.cnblogs.com/_error/p/10484703.html
 

相关文章:

element ui 的滚动条,Element UI 文档中没有被提到的滚动条

element ui 的滚动条,Element UI 文档中被提到的滚动条 Element UI 官网中有用到自定义的滚动条组件&#xff0c;但是发布的所有版本中都不曾提及&#xff0c;个中原因我们不得而知&#xff0c;不过我们还是可以拿过来引用到自己的项目中。 使用的时候&#xff0c; 放在 <el…...

项目四:使用路由交换机构建园区网-任务三:配置路由交换机并进行通信测试

配置路由交换机并通信测试1、在RS-1上创建VLAN并配置Trunk接口2、测试通信结果3、配置RS-1的三层路由接口&#xff08;SVI&#xff09;1、在RS-1上创建VLAN并配置Trunk接口 进入系统视图&#xff0c;关闭信息中心&#xff0c;重命名为RS-1 system-view undo info-center enab…...

数据仓库面试题汇总

一、分析 1&#xff0e;什么是逻辑数据映射&#xff1f;它对 ETL 项目组的作用是什么&#xff1f; 逻辑数据映射&#xff08;Logical Data Map&#xff09;用来描述源系统的数据定义、目标数据仓库的模型以及 将源系统的数据转换到数据仓库中需要做操作和处理方式的说明文档&…...

【Redis】哨兵机制(三)

目录 3.Redis哨兵 3.1.哨兵原理 3.1.1.集群结构和作用 3.1.2.集群监控原理 3.1.3.集群故障恢复原理 3.1.4.小结 3.2.搭建哨兵集群 3.3.RedisTemplate 3.3.1.导入Demo工程 3.3.2.引入依赖 3.3.3.配置Redis地址 3.3.4.配置读写分离 3.Redis哨兵 Redis提供了哨兵&am…...

好用的电脑录屏工具有哪些?电脑好用的录屏工具

现如今很多人都渐渐对录屏有了需求&#xff0c;尤其是网课老师和网络主播的从业者&#xff0c;录屏工具可以帮助他们减轻很多工作量。好用的电脑录屏工具有哪些&#xff1f; 平时在工作学习中&#xff0c;我们往往会有录制视频的需求&#xff0c;比如录制游戏视频、录制网课视频…...

Ubuntu20.04部署安装Kubernetes1.23<最新尝试,无坑版>

文章目录安装部署过程1.修改基本配置2.安装docker3.安装k8s4.kubeadm建立集群5.安装网络插件6.部署dashboard节点安排&#xff1a;nameIPmaster172.16.10.21node1172.16.10.22node2172.16.10.23 如果接下来的步骤中没有特殊指明是哪台机器要做的话&#xff0c;就都要执行 安装…...

九龙证券|6G概念重新活跃 数字经济板块引领A股尾盘回升

周三&#xff0c;沪深两市缩量调整&#xff0c;沪指全天以弱势震荡为主&#xff0c;尾盘在数字经济概念带动下快速拉升&#xff0c;全天微跌0.06%&#xff0c;报3283.25点&#xff1b;深证成指跌落0.09%&#xff0c;报15598.29点&#xff1b;创业板指跌落0.26%&#xff0c;报23…...

使用RabbitMQ发送短信

1、在项目中分别创建模块financial-core、financial-mq、financial-sms&#xff0c;如图&#xff1a; 模块构成 <modules><module>financial-common</module><module>financial-base</module><module>financial-core</module><mo…...

10Wqps评论中台,如何架构?B站是这么做的!!!

说在前面 在尼恩的&#xff08;50&#xff09;读者社群中&#xff0c;经常遇到一个 非常、非常高频的一个面试题&#xff0c;但是很不好回答&#xff0c;类似如下&#xff1a; 千万级数据&#xff0c;如何做系统架构&#xff1f;亿级数据&#xff0c;如何做系统架构&#xff1…...

浅谈Linux下的shell--BASH

环境&#xff1a;centos7.6&#xff0c;腾讯云服务器Linux文章都放在了专栏&#xff1a;【Linux】欢迎支持订阅&#x1f339;shell的概念与作用我们已经学习并知道了操作系统实际上就是一款软件&#xff0c;一款用来管理计算机软硬件资源&#xff0c;为用户提供良好的执行环境的…...

邻桌为何一天就学完了SQL基础语法,数据分析必学的SQL,满满硬货

因为开学原因&#xff0c;导致好久没有更新博客了&#xff0c;谁家大学生一周五天早八&#xff0c; 今天这篇分享数据库操作和 SQL。 SQL 全称是 Structured Query Language&#xff0c;翻译后就是结构化查询语言&#xff0c;是一种数据库查询和程序设计语言&#xff0c;用于…...

机器视觉工程师国内出差必备神器

1&#xff09; 充电宝 &#xff0c;现在手机太重要了。出门可以不带钱包&#xff0c;不带银行卡&#xff0c;但是一定会带手机&#xff0c;手机必须保证有电&#xff0c;方便沟通&#xff0c;遇到紧急情况也可以报打110。 2&#xff09;洗漱包&#xff0c;每次出差都会手忙脚乱…...

ReentrantLock 源码解读

一、ReentrantLock ReentrantLock 是 java JUC 中的一个可重入锁&#xff0c;在上篇文章讲解 AQS 源码的时候提到 ReentrantLock 锁是基于 AQS 实现的&#xff0c;那是如何使用的 AQS 呢&#xff0c;本篇文章一起带大家看下 ReentrantLock 的源码。 在 AQS 中&#xff0c;如果…...

【算法】六大排序 插入排序 希尔排序 选择排序 堆排序 冒泡排序 快速排序

本章的所有代码可以访问这里 排序 一 一、排序的概念及其运用1.1排序的概念1.2 常见的排序算法二、常见排序算法的实现1、直接插入排序2、希尔排序3、选择排序4、堆排序5、冒泡排序6、快速排序6.1霍尔法6.2挖坑法6.3前后指针法7、快速排序非递归一、排序的概念及其运用 1.1排序…...

类和对象万字详解

目录 一、面向对象与面向过程的区别 面向过程&#xff1a; 面向对象&#xff1a; 二、类的引入 class与struct爱恨情仇 class的语法 类的定义&#xff1a; 类的限定访问符 类的实例化 类对象模型 this指针的应用 三、封装 四、类的六个默认成员函数 构造函数 再谈…...

如何使用码匠连接 CouchDB

目录 在码匠中集成 CouchDB 在码匠中使用 CouchDB 关于码匠 CouchDB 是一种开源的 NoSQL 数据库服务&#xff0c;它使用基于文档的数据模型来存储数据。CouchDB 的数据源提供了高度可扩展性、高可用性和分布式性质。它支持跨多个节点的数据同步和复制&#xff0c;可以在多个…...

MySQL对表操作

结束了上一章内容&#xff0c;我们对数据库的操作有一定的了解&#xff0c;本章内容就是针对表中的数据进行操作的。 针对表中数据的操作绝大部分都是增删改查&#xff08;CRUD&#xff09;&#xff0c;CRUD也就是四个单词的缩写&#xff1a; 增加(Create)、查询(Retrieve)、…...

springboot3整合mybatis遇到的坑

本人不经常写java&#xff0c;本文仅作问题记录&#xff0c;如有问题请把不吝赐教。 坑1、Property sqlSessionFactory or sqlSessionTemplate are required Caused by: java.lang.IllegalArgumentException: Property sqlSessionFactory or sqlSessionTemplate are required…...

SpringBoot+Spring常用注解总结

1. SpringBootApplication 这里先单独拎出SpringBootApplication 注解说一下&#xff0c;虽然我们一般不会主动去使用它。 SpringBootApplication public class SpringSecurityJwtGuideApplication {public static void main(java.lang.String[] args) {SpringApplication.ru…...

优化UnRaid容器的WebUI端口设置实现应用快捷访问的方法

文章目录前言详细流程前言 自从入了UnRaid的坑&#xff0c;发现Docker真是个好东西&#xff0c;各种各样的应用工具层出不穷&#xff0c;可以大大提高生产效率。然而在安装Docker应用后&#xff0c;对于如何方便的访问该应用&#xff0c;各个应用服务提供者给出的解决方案不是…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...

跨平台商品数据接口的标准化与规范化发展路径:淘宝京东拼多多的最新实践

在电商行业蓬勃发展的当下&#xff0c;多平台运营已成为众多商家的必然选择。然而&#xff0c;不同电商平台在商品数据接口方面存在差异&#xff0c;导致商家在跨平台运营时面临诸多挑战&#xff0c;如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...