[cssom-view] Calling scrollBy() multiple times resets the current scroll operation
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 25/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- css
- Domain
- web-dev
Research direction
Start by reading the CSSOM View specification section linked in the issue and reproduce the behavior with the provided JSFiddle. Compare repeated scrollBy() calls with Page up/Page down or scrollbar track-piece behavior. Done would require a decided specification direction for whether an in-progress scroll should be extended rather than canceled; no implementation file or test is named.
Written by the indexing model from the issue text.
Description
If scrollBy is called while a previous call to scrollBy is still "running" the current scrolling operation is canceled and a new one is started at the current position. In some cases, this leads to unintuitive behavior and a bad user experience.
In the following example you can click the "Scroll up" and "Scroll down" buttons to scroll up/down by 300px. Each of the colored rectangles are 300px high. If you do a double click on the "Scroll down" button the content is not scrolled by 600px, but some value between 300 and 600.
https://jsfiddle.net/u21e83rq/1/
I don't know whether this can be fixed, because the observed behavior is implied by the spec: https://drafts.csswg.org/cssom-view/#dom-element-scrollby
Add the value of scrollLeft to the left dictionary member.
Add the value of scrollTop to the top dictionary member.
It would be nice if the behavior of scrollBy would be similar to using the "Page up"/"Page down" keys or clicking in the "track-piece" of the scrollbar. (Doing so will not cancel any previous scroll operations but extend the scroll-animation to the new position)
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 24
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from w3c/csswg-drafts
-
Agenda+ css-sizing-4 css-values-5
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
w3c/csswg-drafts#14502 · 1 reaction ·
-
css-values-5 editorial Needs Edits
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
w3c/csswg-drafts#14498 · 2 comments ·
-
css-overflow-4 topic: line-clamp
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
w3c/csswg-drafts#14485 · 1 comment ·
-
Administrative Tracker css-values-4
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
w3c/csswg-drafts#14482 · 4 comments · 1 reaction ·
-
css-values-5 Needs Edits
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
w3c/csswg-drafts#14466 ·
All issues in w3c/csswg-drafts
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
tvOS
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
bvaughn/react-resizable-panels#751 · 1 comment ·
-
www.wiwo.de OpenN: AdGuard Browser Extension P3: Medium T: Annoyance
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
AdguardTeam/AdguardFilters#242026 ·
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 92/100