Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] 增加 v-sticky-scroller 指令 #4

Closed
Lruihao opened this issue Jun 15, 2023 · 1 comment
Closed

[FEATURE] 增加 v-sticky-scroller 指令 #4

Lruihao opened this issue Jun 15, 2023 · 1 comment
Assignees
Labels
enhancement New feature or request

Comments

@Lruihao
Copy link
Owner

Lruihao commented Jun 15, 2023

增加 v-sticky-scroller 指令创建一个 el-srollbar 模拟滚动条,用于实现横向滚动条吸底效果

参考链接:

@Lruihao Lruihao added the enhancement New feature or request label Jun 15, 2023
@Lruihao Lruihao self-assigned this Jun 15, 2023
@Lruihao
Copy link
Owner Author

Lruihao commented Sep 23, 2023

实线思路

  1. 在 el-table 中创建一个空元素当作 scroller,宽度保持和表格内容宽度一致
  2. 为 scroller 创建自定义滚动条,并赋予 sticky bottom 特性
  3. 同步 el-table 横向滚动的行为到 scroller
  4. 同步 scroller 横向滚动的行为到 el-table

优化细节

  • 优化指令参数传递,考虑自定义修饰符
  • 表格内容宽度变化监听
  • el-table 有横向滚动条时才创建 scroller
  • el-sticky-header 和 el-sticky-footer 自动计算 sticky bottom offset
  • 同一个表格只允许创建一个 scroller
  • 样式:有 scroller 才隐藏原生滚动条等

已知问题

目前基于 gemini-scrollbar 实现,存在以下已知问题:

  • safari 浏览器存在兼容性
  • 当禁用原生滚动条时,gemini-scrollbar 计算滑块偏移距离时存在误差,详见

@Lruihao Lruihao changed the title [FEATURE] 增加 v-sticky-h-scroll 指令 [FEATURE] 增加 v-sticky-scroller 指令 Sep 24, 2023
@Lruihao Lruihao moved this from Todo to In Progress in @Lruihao's Recent Activities Sep 24, 2023
@github-project-automation github-project-automation bot moved this from In Progress to Done in @Lruihao's Recent Activities Sep 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Done
Development

No branches or pull requests

1 participant