Skip to content

[ScrollBar/滚动条] 功能需求,希望增加这个组件! #738

@kwooshung

Description

@kwooshung

这个功能解决了什么问题

存在理由

  • 原本的滚动条不能与产品风格统一;
  • 当(Dialog/Modal)弹窗时,需要对body进行padding-right,特别当导航条有position:fixed;的时候还需要对其进行特别处理,而且会产生晃动,如下图;
  • 阿拉伯文时,滚动条可以在左边,我问过会阿拉伯文的朋友,如果阅读阿拉伯文,说滚动条在左边更舒服;
  • 滚动条可以被弹窗组件覆盖住,方便风格统一;
  • 所有浏览器,风格统一;
  • 滚动可以被禁用,逻辑上比较顺畅;
  • 页面上的导航如果需要跟随滚动,可以直接绝对定位,避免fixed引起的各种莫名Bug;

image

你建议的方案是什么

上面的存在理由其实就是建议方案的一部分了。

设计难点和涉及到的其他组件问题

  • 图片懒加载的问题(预测难度:★☆☆☆☆)
  • 如果是所有组件都被包含在这个组件中,那么这个滚动条组件就担任起了浏览器的默认滚动条,针对事件响应的问题;好像可以与window的事件进行映射什么的,具体我没有实际测试。(预测难度:★★★☆☆)
  • 大数据虚拟列表的问题(预测难度:★★★☆☆)

API设计

onStart:开始滚动回调
onUpdate:滚动中回调
onEnd:结束滚动回调
top:滚动距离,可以通过设置像素指定滚动条的位置
smooth:滚动条是否有平滑滚动的效果
animation: 与top配合,表示是否有缓动动画,或者线性动画的过度。

### Tasks
- [ ] https://github.com/Tencent/tdesign-react/issues/2309
- [ ] https://github.com/Tencent/tdesign-react/issues/2310
- [ ] https://github.com/Tencent/tdesign-react/issues/2311
- [ ] https://github.com/Tencent/tdesign-react/issues/2312
- [ ] https://github.com/Tencent/tdesign/issues/739
- [ ] https://github.com/Tencent/tdesign/issues/732
- [ ] https://github.com/Tencent/tdesign-react/issues/2315

同类产品issues
ant-design/ant-design#45433
arco-design/arco-design#2265

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions