plotly / plotly/plotly.js

Scrolling on the legend will cause the parent to scroll

Open
#7,066 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P2 sev-3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

When I scroll in the legend, the whole page scrolls as long as the legend is at the top or bottom. This seems to be normal, but the problem is that it scrolls so fast that it quickly reaches the top or bottom and scrolls the whole page.

I found out it was a bug in the source code makes the scroll so fast, which I checked and fixed with PR #7067 (I'm not sure if my fix is correct, but the scrolling behavior got much better.

The current legend scroll behavior with Plotly v2.34.0:
it reaches the bottom or top quickly and make the page scroll!
recording

Note that I'm using Windows 10 with lines to scroll set to 10 each time, but I think 10 isn't that high:
image

After my fix in the source code, scrolling becomes normal with lines to scroll set to 10:
recording

And even normal if the value for the lines to be scrolled is set to 1:
image

recording

P.S. In the PR #7067, I would prefer the page to stop scrolling at the top or bottom of the legend as well, since the original behavior scrolls the page immediately when it reaches the top or bottom, as opposed to the native browser behavior where you have to scroll again to scroll the parent.

P.S. The touch event also seems to have a problem, when touch dragging the legend the whole page moves.
But in the PR #7067 for solving this issue, I only focus on the wheel scroll event.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing PR #7067 and the legend wheel-scroll handling in Plotly v2.34.0. Reproduce the issue with the Windows wheel settings described, then compare wheel behavior at the legend boundaries. Done means scrolling the legend no longer moves the page unexpectedly, with touch behavior considered separately.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.