如何限制el-scrollbar滚动条组件的最小高度?

发布于 2022-09-12 02:51:09 字数 546 浏览 5 评论 0

image.png

如图所示,当数据特别多的时候,滚动条自适应变成了特别小的点状

想问一下如何限制这个滚动条的最小高度呢?

尝试了下面两个办法都存在bug
1.在css中直接对 el-scrollbar__thumb 设置 min-height
导致高度移动出现bug

2.el-scrollbar__thumb 用伪类假性加长高度,如图所示
(红色是为了更加明显的说明)
image.png

但滚到底部的时候,会出现仿佛没滚到底的错觉局面
(如果把背景色的红色改为跟伪类一样,这种错觉就更明显了)

image.png

所以有什么办法能限制该滚动条的最低高度,且正常滚动呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

等你爱我 2022-09-19 02:51:09

这个滑块高度是代码按页面滚动条高度比例换算的,如果没在代码中进行适配,用css控制是实现不了你需求的,遗憾的是el-scrollbar没有提供这个配置项
你可以看下我写的一个滚动条组件 e-admin scrollbar

源码在这 仅依赖库内一个平滑滚动函数 scroll-to.js
逻辑简单,可以不安装组件库直接拷到项目中用

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文