解决el-scrollbar滚动条初始化不显示的问题

最新推荐文章于 2022-12-08 14:42:05 发布
最新推荐文章于 2022-12-08 14:42:05 发布
阅读量3.4k 收藏 8
点赞数 6
分类专栏： vue 前端开发 文章标签： elementui el-scrollBar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsl471260400/article/details/119597922
版权

当使用el-scrollbar的时候，比如你的数据列表是后端获取的，这时候，初始化的时候，因为数据还没有获取到，导致里面的内容没有撑开，所以滚动条是不显示的，但是可以正常滚动,见下图
在这里插入图片描述

所以解决办法是在获取到列表的时候，调用一下update方法
查看源码的时候，因为scrollBar有一个update方法，所以调用这个方法可以解决

<el-scrollBar ref="scrollDiv"></el-scrollBar>

...
// 异步获取列表之后
this.nextTick(() => {
	//解决滚动条初始化消失的问题
	this.$refs.scrollDiv.update()
})

在这里插入图片描述

lovlin_l
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的el-scrollbar实现自定义滚动
09-20
本篇文章给大家分享了Vue的el-scrollbar实现自定义滚动实现的过程和实例代码，对此有需要的朋友可以参考下。
使用element-ui的el-scrollbar时滚动条没有显示出来但是页面可以滚动的解决办法
yookooi
07-13 3086
可以通过以下方式来调用。已经渲染完成之后再调用。这样，滚动条就会根据内容的变化进行更新，并正确显示出来。组件时，滚动条没有显示出来但页面可以滚动，可以尝试调用其。在适当的时机（例如在数据加载完成后或组件更新后），调用。钩子函数中还是在其他方法或事件回调中调用。在数据加载完成后或其他合适的时机，调用。如果使用 Element UI 的。已经渲染完成之后再调用。
vue2-scrollbar：具有用于Vue 2的自定义滚动条的最简单的漂亮滚动区域组件。https：bosnaufal.github.iovue2-scrollbar
02-21
Vue 2滚动条 具有自定义滚动条的最简单滚动区域组件。 它基于 。 所有动画，高度和宽度都是纯CSS，因此完全可以自定义和负责任！ 是的！。 安装 您可以像将导入到vue组件文件中，并使用预处理器对其进行处理。 您可以通过NPM安装它 npm install vue2-scrollbar 或者只是放在Vue JS之后〜 < script src =" https://vuejs.org/js/vue.min.js " > </ script > < script src =" ./dist/vue2-scrollbar.js " > </ script > < script > // Don't Forget to register it new Vue ( { components : { scrollbar : Vue2Scrollbar }
Flutter InAppWebView在showModalBottomSheet中无法滚动
langyalaoa的博客
07-06 584
设置showModalBottomSheet的enabledDrag为false showModalBottomSheet( context: context, isScrollControlled: true, enableDrag: false, builder: (BuildContext modalContext) { return Container( height: MediaQuer
scrollbar自定义样式
赵又又的博客
11-10 239
在移动端的开发中经常遇到横向滚动的样式，有时候UI对滚动条的样式有要求，系统自带的滚动条样式就不能满足需求了，下面来分享下手动实现滚动条样式的简单写法。 先看效果图吧 核心就是1、隐藏系统自带样式；2、计算好滚动条长度的比例和滚动的比例。下面看代码 重要的标红的注释，比例计算好了就成功一半了???? ...
element ui的el-scrollbar进入页面自动更新长度
weixin_43258184的博客
12-02 2334
el-scrollbar是element ui的滚动条，它的底层代码里面有两个方法，一个是unpdate(),一个是handleScroll()。具体可以参考https://blog.csdn.net/weixin_34025051/article/details/92508359 它原本是随着页面的长度自适应自己的长度的，现在有一种情况，就是进入页面滚动条的长度没有自动更新，需要人为的手动刷新才可以更新滚动条的高度。是因为页面每次刷新的时候才会重新计算页面的高度，进而更新了滚动条高度。 那怎么让页面一进来
element-ui el-scrollbar滚动条初始化不显示
woniuyibuyibu的博客
12-08 1330
el-scrollbar滚动条打开有时候不显示问题
element plus之 el-scrollbar 异步请求后滚动条不显示，但可正常滚动
qq_48850466的博客
11-06 1143
el-scrollbar 异步请求后滚动条不显示，但可正常滚动
elementUi滚动条的使用及设置滚动条一直显示
haogemr的博客
04-27 1万+
elementUi滚动条的使用及设置滚动条一直显示
element的弹窗滚动条重置问题
ldoit的博客
05-27 986
element的弹窗滚动条重置问题 弹窗出现滚动条的时候滚动到最底下， 下次在点开的时候还在最底下，可以通过以下方式解决 <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :lock-scroll="false" //主要是这个属性 :append-to-body="true" //跟这个属性 :close-on-click-modal="false" width="10
react-perfect-scrollbar:完美滚动条的React包装
05-02
React完美滚动条 这是一个包装，允许在React中使用 。 要阅读版本小于1.0的文档，请访问 。 用法 安装软件包npm install react-perfect-scrollbar -S如果您具有用于css文件的加载器，请导入css文件： import '...
tailwind-scrollbar:Tailwind CSS的滚动条插件
04-28
Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。安装yarn add -D tailwind-scrollbar 或者npm install --save-dev tailwind-scrollbar 将其添加到Tailwind配置的plugins数组中...
WebView隐藏滚动条，隐藏缩放按钮，适应手机的分辨率
qq_27942511的博客
05-09 2693
滚动条不显示： webView.setHorizontalScrollBarEnabled(false);//水平不显示 webView.setVerticalScrollBarEnabled(false);//垂直不显示隐藏缩放按钮：settings.setDisplayZoomControls(false);适应手机的分辨率：//这方法可以让你的页面适应手机屏幕的分辨率，完整的显示在屏幕上，可
Flutter ListView保留滚动位置之优化之路
u010152805的专栏
10-25 4726
起初，采用 TabBarView + ListView 结合 TabController 的方式实现了三页列表展示。但是，切换 TabBarView 的时候，每一页需要重新绘制，导致 ListView 无法保留上次所在位置。为了解决这个问题，通过 ScrollController 的 scrollController.position.pixels 记录 ListView 停留位置...
el-scrollbar滚动条不显示解决方法
kk7521的博客
01-18 1万+
## el-scrollbar滚动条不显示解决方法 **对自己遇到的一些问题做一个记录帖，方便以后查询。**
ElementUI表格滚动条位置重置
NuoYan3327的博客
12-10 3469
在使用ElementUI时使用表格组件时遇到了一个问题，当我在弹出层中嵌套使用表格组件时如果我的表格内容过长出现滚动条时，我把滚动条拖放到中间位置后关闭这个弹出层，当我下次重新打开时这个表格的滚动条位置仍然保留了上次退出时的位置，导致了画面没有显示最初始的效果。 这个问题可能在表格与其他组件多重嵌套的情况下会复现，想让表格下方或者右方的滚动条位置复原其实也很简单，首先...
scroll滚动条插件初始化问题
08-15 202
一种特殊场景下是滚动条容器先隐藏，点击某个东西后显示出来。然后实例化滚动条。实例 js: var flag = true; document.getElementById('btn1').onclick = function(){ document.querySelector('.wrap').style.display...
easyUI的dialog怎么设置scrolltop每次打开恢复初始位置
技术之旅：一位项目管理者的编程视角与项目管理洞见；
02-10 3221
首先国内的资料查了很久但是没有查到。 我的问题是下面这样，每次打开之后只要我的滚动条拉到底之后，每次打开都是默认这样的情况。 这样的用户的体验及其糟糕，然后我参考了一下国外的大牛（stworthy）的意见，在这里表示感谢。 创建一个 div （dialog）然后嵌套进去一个layout 然后在进行位置恢复。好了不多说上代码 Open Close
elementUI Table的行合并通用方法
热门推荐
lovlin_l的代码世界
05-29 1万+
有些业务需求是需要table进行行合并的，所以就写了个通用的方法来处理，废话不多说，先上图 首先是内部使用el-table的方法:span-method='objectSpanMethod' data() { return { table: [{ id: '1', checkRoom: 'CTROOM', checkProject: '颈椎...
el-scrollbar滚动条返回顶部
最新发布
08-05
要将 el-scrollbar 滚动条返回顶部，你可以使用以下方法： 1. 使用 JavaScript 控制滚动条位置： ```javascriptconst scrollContainer = document.querySelector('.el-scrollbar__wrap'); // 获取 el-scrollbar 的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值