不想用原生滚动条，用Element-ui隐藏组件el-scrollbar

最新推荐文章于 2024-02-24 09:44:28 发布
最新推荐文章于 2024-02-24 09:44:28 发布
阅读量377 收藏
点赞数
分类专栏： 笔记 文章标签： vue html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42220283/article/details/119176826
版权

查看源码接受的props

props: {
  native: Boolean,  // 是否启用原生样式；默认false
  wrapStyle: {},  
  wrapClass: {},  // 标签样式  F12 查看
  viewClass: {},   
  viewStyle: {},
  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
  tag: {   // 自定义容器的标签
    type: String,
    default: 'div'
  }
},
// 使用
<el-scrollbar > 
	// 需要滚动的内容
</el-scrollbar>

个人推荐使用viewStyle代替viewClass，不然有时设置横向滚动样式时，不生效

一撇一画
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
去掉浏览器自带滚动条
码字员的博客
01-12 549
style=‘overflow:-Scroll;overflow-y:hidden’ 隐藏纵向显示横向 隐藏浏览器自带滚动条 ::-webkit-scrollbar{ display:none; }
在Vue中更改ElementUI滚动条样式
qq_36493878的博客
10-17 1064
//更改表格滚动条列的样式 /deep/ .el-table th.gutter{ background: #000000 !important; border-bottom: #7d7f84 solid 1px; width: 0; } //更改滚动条样式 /deep/ .el-table__body-wrapper::-webkit-scrollbar { display:block; width: 12px; height: auto; background-color: rgba(167, 122,
elementui 修改 el-table的滚动条样式
LJJONESEED的博客
09-28 972
修改elementui中el-table滚动条的样式。
element的table默认滚动感觉是继承的浏览器默认的滚动条，重写一下滚动条样式，让她美美哒
lmh19921116的博客
06-03 392
::-webkit-scrollbar{ background-color: #fff； width: 8px; height: 8px; } ::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,.1); border-radius: 6px; } 把这个样式放在App.vue中,全局的样式就改变了，这个是谷歌的哦
直播app开发搭建，el-table去掉滚动条
云豹网络科技
03-15 498
以上就是直播app开发搭建，el-table去掉滚动条， 更多内容欢迎关注之后的文章。直播app开发搭建，el-table去掉滚动条。
关于element-ui的隐藏组件el-scrollbar的使用
12-11
虽然在官方文档中没有给出这个组件，但是在源码中是有的。所以我们可以直接使用： <el></el> 但是我们需要微调一下样式，两种情况的演示代码如下： 已知内容高度 <el class='page-component__scroll'></el> &lt...
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
例如，在原文中提到的使用火狐浏览器时，通过优化样式调整滚动条可能无法兼容，使用 Element-ui 的 ElScrollBar 组件则可以避免此类问题。 2. ElScrollBar 组件的属性和用法 ElScrollBar 组件提供了几个关键属性，...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
在Element-ui中，el-option元素在用户滚动时超出其父元素区域的问题是一个常见的困扰开发者的问题。这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-...
vue用el-scrollbar替换原生滚动条且不干扰其它style
qq_39203889的博客
09-10 1081
1、用el-scrollbar包裹目标div 2、为目标div设置class，如class=“test-class” 3、全局样式： .test-class .el-scrollbar__wrap { overflow: scroll; width: 111%; height: 120%; }
elementui的横向滚动,element-ui中隐藏组件el-scrollbar的使用
weixin_30240765的博客
03-19 1792
element-ui中隐藏组件el-scrollbar的使用element-ui中隐藏组件el-scrollbar的使用一、使用虽然官网没有介绍该组件，但是网上有许多小伙伴扒了源码并提供了使用方法view-class=""wrap-class=""tag="">属性props: {native: Boolean, // 是否使用本原生滚动条，设为true则不会启用element-ui自定义...
el-tabs点击刷新
weixin_48621384的博客
06-29 670
一，el-tabls的template代码(红色切为切换的状态保持js对象) <el-tabs type="card" v-model="activeName" @tab-click="handleTabClick"> <el-tab-pane label="发布单管理" name="deploy" value=""> <deploy-list v-if="tabRefresh.deploy"/> </el-tab-p
element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动 适配不同的浏览器
小菜鸡程序媛的挣扎史
10-17 6363
1、 首先从上述路径可以看见scrollbar这个组件是存在的 渲染出来层级 *el-scrollbar(下面是自动渲染出来的不需要写在代码里) *el-scrollbar__wrap *el-scollbar__view *el-scollbar__bar is-horizontal *el-scollbar...
el-scrollbar隐藏横向滚动条以及消除el-select和el-cascader的影响
最新发布
qq_44741577的博客
02-24 307
el-scrollbar隐藏横向滚动条以及消除el-select和el-cascader的影响。
element的表格设置及滚动条的设置
木得是的博客
06-29 6279
elementui的table表格的设置以及滚动条样式的修改，以及表格中文字颜色根据需求进行变更颜色等。
Element UI中的table组件添加横向滚动条
热门推荐
Web_chicken的博客
08-27 1万+
如何给Element UI中的table组件添加横向滚动条 并非是浏览器自带滚动条样式，而是类似于Element滚动条样式 话不多说直接上代码 .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ } .el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 10px; /*
给element-ui的table添加自己的滚动条
PK的博客
06-25 7522
element-ui的table表格的滚动条并不能满足我们实际的开发需求，特别是对于window用户来说，当表格超出屏幕范围时，每当要滑动时都需要滑到最底部才能滚动，很不方便。还有就是启用冻结效果后，滚动条被盖住的问题。本文就是为了解决这些问题，先看看实际效果。 1、效果 1、滑到底部时 2、未滑到底部时 效果还是很不错的，十分丝滑。 看了效果后直接开干吧。 2、操作流程 1、首先去除掉原有element-ui的滚动条 找到el-table__body-wrapper类，添加样式，这里也要考虑到兼容问题
vue类似阻断scroll完成
lalalademax的博客
08-27 348
一个页面内有多个滚动条，其中某个滚动条进行了锚点，为防止其它滚动条对其造成影响，只要给其它滚动条使用者（el-scrollbar，el-table设置了height）添加class，在监听时过滤添加了class的滚动事件即可 滚动条监听： <div ref='scroll'> <el-scrollbar ></el-scrollbar> <el-scrollbar class='stopScroll'></el-scrollbar> &.
【element】去除＜el-scrollbar＞横向滚动条
zhaojingj_的博客
03-15 5244
去除el-scrollbar横向滚动条
vue3+element-ui实现el-table表格组件自动循环滚动
04-26
对于实现el-table表格组件自动循环滚动，可以使用element-ui提供的scroll组件，并设置它的属性为loop：true。具体实现步骤如下： 1. 在template中使用el-table组件，并设置属性fixed-layout和height，fixed-layout为true时，固定表格布局，height设置表格的高度。 2. 在el-table标签内部，使用el-scrollbar组件，设置其属性v-model和noresize，其中v-model为当前滚动位置，noresize为禁止重新调整尺寸。 3. 在el-scrollbar内部使用el-table-column组件，设置表格的列信息，并填充数据。注意：表格的列宽需固定，否则会影响滑动效果。 4. 最后，在el-table组件中使用el-table-column定义的列信息，呈现数据。 实现以上步骤后，即可得到一个自动循环滚动的el-table表格组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值