antvis / antvis/S2

🙏滚动条增加hover的动作的易用性建议

Open
#2,838 2 comments 0 reactions 0 assignees View on GitHub
⚡ enhancement 💤 inactive 🙏feature request
Dominant language
TypeScript
Stars
1.7k
Forks
220
PR merge metrics
No merged PRs in 30d

Description

### 🏷 Version

| Package | Version |
| -------------- | ------- |
| @antv/s2 | |
| @antv/s2-react | |
| @antv/s2-vue | |

### Sheet Type

- [ ] PivotSheet
- [ ] TableSheet
- [ ] GridAnalysisSheet
- [ ] StrategySheet
- [ ] EditableSheet

### 🖋 Description

目前滚动条是只能配置size和hoverSize, 而这两个都是thumbSize滑块宽度, 不能配置trackSize滑道宽度. 在大屏场景下, 一个屏幕上很多图表, 每个图表占的大小不大, 所以滚动条配置size=6, hoverSize=10. 这个6相对来说是很小的, 也就触发hover有点难用, 得小心翼翼的. 因此希望能配置trackSize = 12, 默认滚动条size=6位于垂直滑道右侧, 当鼠标移入滑道时, 触发hover, 此时hoverSize=10, 居中, 两边还有1px的空隙, 这样提高滚动条的易用性. 还有现在滚动条只能在滑块上触发hover, 这是难用的一种实现, 在大数据量的场景, 即滑道的整体高度很小时, 滑块就很小, 想触发hover就更得小心翼翼了, 因此合理的触发hover事件应该是滑块和滑道都能触发.
### 🏞 What problem does this feature solve

不能配置滚动条滑道宽度, 在大屏情况下一般不会把默认size设太大, 太大的影响美观, 所以都是搭配hoverSize使用的. 而此时触发hover不是很方便, 被限制在了滑块这个小区域上
### 🧐 Suggest the API

| name | type | default | description |
| ---- | ---- | ------- | ----------- |
| trackSize | Number | 和size一样 | 滚动条滑道大小 |
| thumbAlign | Number | 0 | 0居中, >0居右或居下, <0局左或局上 |
| thumbHoverAlign | Number | 0 | 0居中, >0居右或居下, <0局左或局上 |
以上接口应该都是在trackSize > size | hoverSize时才有效

Contributor guide

Open the contributing guide

Research direction

No files, tests, or entry points are named. Start by locating the scrollbar configuration and hover handling, then compare the requested trackSize, alignment options, and track-wide hover behavior with the existing API; done means the proposed options work without harming the current scrollbar appearance or interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.