element-plus中的el-scrollbar组件横向滚动条问题

最新推荐文章于 2024-07-18 15:20:20 发布
最新推荐文章于 2024-07-18 15:20:20 发布
阅读量1.3k 收藏 7
点赞数 8
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013553807/article/details/136412673
版权
文章讲述了在VueElementUI的el-scrollbar组件中，当内容过多导致出现纵向滚动条时，横向滚动条位置不便于操作的问题。提供了解决方案：通过设置view-style属性的height为100%来修复此问题。
摘要由CSDN通过智能技术生成

问题

        el-scrollbar组件在使用中，当内容非常多有纵向滚动条的情况下，横向滚动条总是在最下边，每次需要纵向滚动条拖到最下边才能拖动横向滚动条。

解决方案

       在view-style属性上加一个height的高度就可以了

<el-scrollbar view-style="height:100%;">
    <!-- code -->
</el-scrollbar>

气乃本
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）
王佳斌
02-21 3212
vue3，element plus，el-table，table表格组件，设置滚动条样式，修改覆盖滚动条颜色和宽度，element plus更改table表格滚动条样式，vue3修改el-table滚动条颜色高度宽度，设置表格滚动条样式，怎么设置element plus表格组件的滚动条宽高颜色，如何设置table固定高度时的滚动条样式，修改el-table滚动条样式不生效怎么办，如何修改表格Table组件中滚动条的样式，Element-plus中表格Table组件中滚动条样式修改，deep覆盖样式失败，滚动
element vue 纵向滑动条_Element-ui之ElScrollBar组件滚动条的使用方法
weixin_39523887的博客
12-20 1958
在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。使用的原因：原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。.sidebar {position: fixed;border-right: 1px solid rgba(0,0,...
使用elementUI滚动条之横向滚动
农码精神
01-31 7945
使用elementUI滚动条之横向滚动 用过elementUI组件应该会知道它内置一个滚动效果，官网对此组件没有相关文档,也是细心网友发现的。 &lt;el-scrollbar&gt;&lt;/el-scrollbar&gt; 将会出现滚动的内容放到上述标签内就可以了。这里要简单的设置一下，将标签的height设为100%，读者查...
vue2.0结合使用 el-scrollbar 和 v-for实现一个横向滚动的元素列表，并且能够自动滚动到指定元素（开箱即用）
最新发布
weixin_44056717的博客
07-18 280
【代码】vue2.0结合使用 el-scrollbar 和 v-for实现一个横向滚动的元素列表，并且能够自动滚动到指定元素（开箱即用）
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
主要介绍了Element-ui之ElScrollBar组件滚动条的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
el-scrollbar出现横向滚动条解决方案
简单点的博客
12-20 1388
el-scrollbar出现横向滚动条解决方案
el-scrollbar显示横向滚动条
weixin_46211267的博客
03-16 4652
让横向滚动条出现，同时不显示默认的滚动条， 需要在 el-scrollbar__wrap 添加 .el-scrollbar__wrap{ overflow-x: auto; height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式 } 1 2 3 4 在el-scrollbar 是 overflow: hidden; el-scrollbar__view必须是浮动或 display: inline-block 才能出现滚动条 .el-scrollbar .
el-scrollbar 横向滚动条使用
qq_34724739的博客
12-25 1万+
让横向滚动条出现，同时不显示默认的滚动条， 需要在 el-scrollbar__wrap 添加 .el-scrollbar__wrap{ overflow-x: auto; height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式 } 在el-scrollbar 是 overflow: hidden; .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{ white-space: nowrap;
element-plus el-scrollbar 滚轮横向滚动
zezejingi的博客
01-09 1387
element-plus el-scrollbar 滚轮横向滚动
element-ui的滚动条组件el-scrollbar如何使用
格の调
03-03 7131
项目原来用html做的，有个scrollbar滚动条，是js插件，现在用vue框架了，想用这个滚动条还有点复杂，突然想到element ui官方文档的侧栏不就是的吗， 怎么样，看起来是不是觉得挺优雅。 但是经过仔细找，发现Element 官方没有说有这么一个Scrollbar组件的， 文档没有说，但当我查看官网源代码，发现他有使用el-scrollbar这样一个组件，经过多方查找，虽然官网没有写使用文档，但是我们还是可以用的。 基础用法： <div class="lsm-container".
Vue的el-scrollbar实现自定义滚动
12-23
为什么要用el-scrollbar？ 最近在写一个内部平台系统，相信大家都知道，其中会有很多自定义的滚动区域，就比如说现在有一个列表需要滚动，第一个念头就是用 overflow: scroll; 啊！嗯嗯，又不是不能用！如果我不曾见过太阳，我本可以忍受黑暗。 大家总会见过不少滚动条比较优雅的实现，不可否认，美是让人愉悦的。所以这些年行走江湖我满怀愧疚，让大家见丑了。 为什么要用el-scrollbar，大家都知道，模拟一个滚动不难，而且市面上有很多这样的库。我考虑的，首先项目用的框架是Vue，然后用的组件库是Element，Element官网也有很多滚动，而且像是Select组件的下拉框也是
element-ui之el-scrollbar源码解析学习
weixin_34025051的博客
12-06 2413
2019独角兽企业重金招聘Python工程师标准>>> ...
Element-UI 给el-dropdown添加滚动条
ddk54321的博客
04-08 9345
Element-UI 官方文档中没有给出下拉菜单（el-dropdown）设置滚动条的方法。 但是又没有试验出为下拉菜单添加el-scrollbar的使用方法。 所以直接修改的自带的滚动条样式。 下拉菜单el-dropdwn的HTML代码： <!-- 未归档项目下拉框 --> <el-dropdown class="project-container" @comm...
element-plus-admin源码剖析
weixin_30230009的博客
04-12 6095
前言前端技术的一个特点是项目之间会使用很多第三方npm包，在学习时，如果我们只关注其中一个框架，是很难有手感的，我自身就是一个具体的例子，花时间阅读完Vue3文档后，具有灵活运用还有一段距离，这个阶段就需要多看他人成熟项目是怎么编写的，多看具体的实例，本文记录我阅读element-plus-admin这个项目时的细节。element-plus-admin（https://...
el-scrollbar下拉触发事件
weixin_44222341的博客
09-17 2141
由于element-ui官网的文档，没有el-scrollbar的文档描述，在公司接手项目看到之前的同事用了这个就学习了一下。 通过百度试用了几种方法最后就只有一种是有用的，也是最最简单的。 <el-scrollbar class="scroll-wrap" ref="celia" id="resultScroll"> <div v-for="(item,index) in finalTable" :key="item.fdictionary">
element el-scrollbar 横向滚动条问题解决以及随后引发的下拉框问题修复
热门推荐
h18820956011的博客
08-06 1万+
在使用vue时，就会有使用到elementUI，之后就是不断的在入坑和天坑之间徘徊。 elementUI中有个隐藏的组件，就是滚动条-----<el-scrollbar></el-scrollbar> 可以参考elementUI的官网代码 这里用F12可以查看到 添加之后会有出现横向滚...
用el-scrollbar写一个可横向滚动的vue组件
weixin_48009166的博客
12-05 3070
组件 el-scrollbar组件 scrollWidth scrollLeft clientWidth 点击一次按钮更改scrollLeft或scrollRight elementui
el-scrollbar组件 横向滚动
07-10
对于el-scrollbar组件的横向滚动，你可以使用以下步骤实现： 1. 首先你的HTML模板中，将el-scrollbar组放置在需要横向滚动的容器部。例如： ```html <div class="scroll-container"> <el-scrollbar> <!-- 横向滚动内容放这里 --> </el-scrollbar> </div> ` 2. 然后，在你的CSS样式，为容器添加适的样式以限制宽度并显示横向滚动条。例如： ```css .scroll-container { width: 300px; /* 设置容器的宽度 */ overflow-x: scroll; /* 启用横向滚动 */ white-space: nowrap; /* 防止内容换行 */ } ``` 3. 最后，在el-scrollbar组件内部添加需要横向滚动的内容。可以是文本、图片或其他任何元素。例如： ```html <div class="scroll-container"> <el-scrollbar> <div class="scroll-content"> <!-- 横向滚动内容放在这里 --> </div> </el-scrollbar> </div> ``` 通过以上步骤，你就可以实现el-scrollbar组件的横向滚动效果了。记得根据需要调整容器的宽度和内容的样式，以达到你想要的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值