Skip to content

fix(diffs): auto-scroll when dragging past viewport#360

Open
wsoule wants to merge 1 commit intopierrecomputer:mainfrom
wsoule:wsoule/auto-scroll-selection
Open

fix(diffs): auto-scroll when dragging past viewport#360
wsoule wants to merge 1 commit intopierrecomputer:mainfrom
wsoule:wsoule/auto-scroll-selection

Conversation

@wsoule
Copy link

@wsoule wsoule commented Feb 26, 2026

Description

Before:
https://github.com/user-attachments/assets/b8681a0f-ab62-4df6-9b5d-bff0bad6f982

After:

Screen.Recording.2026-02-26.at.09.20.59.mov

Before:
When clicking a line number and dragging past the top or bottom of the viewport:

No auto-scroll: the page doesn't scroll, so lines outside the current viewport are unreachable during a drag.

After:

  • Edge auto-scroll: a self-rescheduling requestAnimationFrame loop kicks in when the pointer is within 80px of the viewport top or bottom. Each frame it calls window.scrollBy, then re-queries the element at the same screen coordinates (which have shifted after scrolling) to extend the selection to newly visible lines. The loop stops on pointer up or when the cursor moves back into the safe zone.

The scroll speed ramps linearly from 0 at the zone boundary up to 20px/frame at the screen edge.
Note: the 80px and 20px/frame may need to change.

Motivation & Context

When selecting lines that goes past the view window, you must cancel your selection, scroll down, and redo the selection. If said selection is larger than the view window, you must make your screen larger to select all content.

This change make it so the page auto scrolls with the selected lines.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • Refactoring (non-breaking change)
  • New feature (non-breaking change which adds functionality). You must have
    first discussed with the dev team and they should be aware that this PR is
    being opened
  • Breaking change (fix or feature that would change existing functionality).
    You must have first discussed with the dev team and they should be aware
    that this PR is being opened
  • Documentation update

Checklist

  • I have read the
    contributing guidelines
  • My code follows the code style of the project (bun run lint)
  • My code is formatted properly (bun run format)
  • I have updated the documentation accordingly (if applicable)
  • I have added tests to cover my changes (if applicable)
  • All new and existing tests pass (bun run diffs:test)

How was AI used in generating this PR

Used to assess whether to use requestAnimationFrame or setInterval on scrolling.

Related issues

@vercel
Copy link

vercel bot commented Feb 26, 2026

@wsoule is attempting to deploy a commit to the Pierre Computer Company Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant