element-ui隐藏的滚动条样式

最新推荐文章于 2024-05-28 20:52:48 发布
置顶 最新推荐文章于 2024-05-28 20:52:48 发布
阅读量1.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshine_myPG/article/details/99442231
版权

 

今天突然收到通知说这个滚动条也要兼容ie，以前是用vue-happy-scroll这个插件，结果不知道什么问题，没有兼容到ie。找了半天不知道什么问题。找了半天插件，突然发现element-ui的框架的滚动条风格也很好，也测试了ie兼容都没有问题。后面才发现他们自己就有一个组件https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/index.js，在找了一下资料。使用起来也很简单，<el-scrollbar></el-scrollbar>这个组件。已经亲自使用测试过没有问题。特地分享有碰到这些问题的小伙伴们。

小点灬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
隐藏组件滚动栏
qq_44058111的博客
04-21 558
背景 在写B类项目实训-自定义Project选择器的时候，完成了原本的样式，但是发现在内容溢出需要scroll的时候变成这个样子 这显然是有些突兀的，所以决定要隐藏掉滚动条. 实现 组件构成 因为使用了antd的Tab组件 渲染出的文档结构如下： 为了实现根据内层组件高度根据窗口高度变化，需要设置动态height值。 中间部分的"ant-xxx"组件是antd组件内部镶套的，在样式上不方便改变。但由于中间组件的position全部为static,所以只需要在antd组件外层的容器设置position:re
Element UI 中被隐藏的滚动条
weixin_30725315的博客
03-06 335
Element UI 官网中有用到自定义的滚动条组件，但是发布的所有版本中都不曾提及，个中原因我们不得而知，不过我们还是可以拿过来引用到自己的项目中。使用的时候，放在 <el-scrollbar></el-scrollbar> 标签内即可如： <div style="height:100%"> <el-scrollbar class="m-sc...
element-ui组件table去除下方滚动条，实现鼠标左右拖拽移动表格
最新发布
懒人w的博客
05-28 1234
项目前端使用vue框架，页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时，下方会出现横向的滚动条，便于用户对表格进行左右滑动。考虑到页面美观问题，滚动条设置的很窄，导致用户使用时不方便进行左右滑动。 现要求，去除表格下方滚动条，用户可直接拖拽表格实现左右滑动功能。
Element UI 中滚动条隐藏设置
小猫爪子
05-18 1209
使用<el-scrollbar></el-scrollbar> 标签 例如： <template> <el-scrollbar style="height:100%"> <div class="main-home"> <top ref="top"></top> <div class="main-container"> <router-view></router-view
element的隐藏滚动条组件el-scrollbar
qq_45030898的博客
01-25 6023
隐藏滚动条组件el-scrollbar1.开发场景2.认识el-scrollbar组件3.隐藏横向滚动条 1.开发场景 这次做项目的时候，遇到了滚动条，自己用的也是elementui组件，突然发现一个隐藏的滚动条组件el-scrollbar,学习一下吧。 开始前，先看下成果吧 2.认识el-scrollbar组件 看了一篇element ScrollBar滚动组件源码深入分析的文章，感兴趣的同学可以自己再深掘一下，还是有意思的。el-scrollbar组件，首先要注意的是要设置高度。 <
隐藏elementui表格滚动条
weixin_50248523的博客
05-17 469
【代码】隐藏elementui表格滚动条。
element-ui 中的table的列隐藏问题解决
12-12
因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列可以方便的看见比较重要的几列的内容。用之前的方法的话，非常简单，直接设置display的显示和隐藏就可以了。 但是放在element-ui中来就...
css使用overflow属性控制滚动条的样式
09-22
接下来，我们将深入探讨`overflow`属性的不同用法及其对滚动条样式的影响。 1. `overflow: auto` 当设置`overflow`为`auto`时，浏览器会在内容溢出容器边界时自动添加滚动条。这意味着只有在内容实际需要滚动的...
深入分析element ScrollBar滚动组件
10-17
Element UI 的 ScrollBar 滚动组件是一个用于自定义滚动条外观和行为的 Vue 组件。它允许开发者通过提供自定义样式和交互方式，以提升用户界面的美观度和用户体验。深入分析 ScrollBar 源码有助于我们更好地理解和...
使用Element的InfiniteScroll 无限滚动组件报错的解决
10-15
2. **CSS样式**：确保设置了元素的高度（如`height:200px`），并设置`overflow:auto`以显示滚动条。 3. **控制加载状态**：可以使用`infinite-scroll-disabled`属性来控制是否禁用加载功能。例如，当`disabled`计算...
TABLE滚动条
03-17
2. **CSS控制滚动条样式**： CSS3引入了新的属性，如`::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`等，允许开发者自定义滚动条的样式，包括颜色、大小、形状等。不过要注意，这些属性是非标准的，只在Webkit...
自定义美化滚动条插件
04-12
JQ浏览器滚动条插件 浏览器滚动条美化JQ浏览器滚动条插件 浏览器滚动条美化
element-ui自带的滚动条
frank_fong的博客
03-31 1015
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...
隐藏Element导航条的滚动条的方法。
log_huangxiaoxhe的博客
08-13 717
两种方法隐藏导航栏滚动条！
解决使用element-ui表格，不显示滚动条方法
weixin_60196946的博客
02-26 2095
解决使用element-ui表格，不显示滚动条方法
隐藏滚动条的多种方式
QIAO_hh的博客
04-20 3274
隐藏滚动条的多种方式
一些问题——滚动条样式设置+elementUI中一些内部样式修改
weixin_58412143的博客
03-31 2029
::-webkit-scrollbar { width: 10px; /* 纵向滚动条*/ height: 5px; /* 横向滚动条 */ background-color: #fff; } /*定义滚动条轨道 内阴影*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); background-color: #ccc; } //下面是ul的滑动条 /*定义滑块 内阴影.
Vue2-Element-ui滚动条美化
东小小川
05-03 988
【代码】Vue2-Element-ui滚动条样式美化。
element-textarea,滚动条样式更美观.
Backbody_的博客
03-09 1786
element-textarea,滚动条样式更美观.
element ui隐藏table滚动条
06-28
### 回答1： 可以通过设置表格的样式来隐藏滚动条，具体方法如下： 1. 在表格的外层容器上设置样式 overflow: hidden; 2. 在表格的 tbody 上设置样式 overflow-y: scroll; 这样就可以隐藏表格的滚动条了。 ### 回答2： Element UI 是一个基于 Vue.js 的 UI 库，它提供了丰富的组件，包括表格组件。在使用 Element UI 表格组件时，有时候需要隐藏表格的滚动条，这可以通过以下步骤完成： 1. 找到 Element UI 表格组件的容器元素，一般是一个 class 为 el-table 的 div 元素。 2. 在该容器元素的样式中设置 overflow 属性为 hidden，这样便可隐藏表格的滚动条。 例如，如果要隐藏 id 为 my-table 的表格组件的滚动条，可以在样式中添加如下代码： ```css #my-table .el-table { overflow: hidden; } ``` 这样便可成功地隐藏表格组件的滚动条。 另外，如果想要隐藏表头和表格内容的滚动条，可以将 overflow 属性应用到 el-table__header-wrapper 和 el-table__body-wrapper 元素，例如： ```css #my-table .el-table__header-wrapper, #my-table .el-table__body-wrapper { overflow: hidden; } ``` 这样便可同时隐藏表头和表格内容的滚动条。 总之，Element UI 表格组件的滚动条隐藏，可以通过设置容器元素的 overflow 属性为 hidden 实现。 ### 回答3： 在 Element UI 中，我们可以使用 el-table 组件来显示数据表格，而当数据量较大时，就会出现滚动条。如果我们希望隐藏滚动条，可以采取以下方法： 方法1：CSS 样式方式 1.在 el-table 标签上加上 style="overflow:hidden;"，这样能够隐去直接展示的滚动条，但是在鼠标滚动滚轮的时候，仍会出现默认的浏览器滚动条，不能达到完全隐藏的效果。 2.给 el-table 标签外层添加一个包裹层，如 <div class="table-wrapper">，并设置其样式为 overflow:hidden;。同时，将 el-table 的高度设置为最大值：max-height: none; height: auto;。这样展示时就能完全隐藏滚动条。 3.但是，由于这种方法需要额外添加包裹层，所以可能会减少页面的美观度，不够简洁。 方法2：JS 方式 1.在页面加载完成后，获取 el-table 的 class 属性，如：let tableClass = document.querySelector('.el-table--scrollable-y'); 2.获取到 class 属性后，为 el-table 隐藏滚动条：tableClass.style.overflowY = 'hidden'; 3.但是，使用 JS 方法隐藏滚动条需要在页面加载后再操作，如果操作晚了容易引起页面的闪烁。同时，这种方式虽然能够隐藏滚动条，但是并没有解决滚动的问题，使用鼠标滚轮时仍会触发滚动事件。 总结来说，以上两种方法中，CSS 样式方式更为简洁，但是需要额外添加包裹层，而 JS 方式虽然容易实现，但是需要注意操作的时机。在实际开发中，可以根据具体需求和场景选择合适的方法来隐藏滚动条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值