Skip to content

refactor: replace scrollOnLinks with drag-to-activate threshold #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ubermanu wants to merge 2 commits into
base: main
Choose a base branch
from
Open

refactor: replace scrollOnLinks with drag-to-activate threshold #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
786af02
refactor: replace scrollOnLinks with drag-to-activate threshold
ubermanu May 18, 2026
4c3603e
fix: initialize scroll direction immediately on drag activation
ubermanu May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/strict-schools-find.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
@ubermanu/roller: minor
---

Replace `scrollOnLinks` option with drag-to-activate scrolling.
131 changes: 52 additions & 79 deletions extensions/roller/e2e/scroll.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,17 +57,10 @@
let scrollY = await page.evaluate(() => window.scrollY)
expect(scrollY).toBe(0)

// Move and press middle button
// Press middle button and drag past the threshold to activate scrolling
await page.mouse.move(200, 200)
await page.mouse.down({ button: 'middle' })
await new Promise((r) => setTimeout(r, 100))

// Release middle button to trigger sticky scroll
await page.mouse.up({ button: 'middle' })
await new Promise((r) => setTimeout(r, 100))

// Move mouse down
await page.mouse.move(200, 300)
await page.mouse.move(200, 215)

// Wait for scrolling to occur
await new Promise((r) => setTimeout(r, 1500))
Expand All @@ -76,10 +69,9 @@
scrollY = await page.evaluate(() => window.scrollY)

// Stop scrolling
await page.mouse.down({ button: 'left' })
await page.mouse.up({ button: 'left' })
await page.mouse.up({ button: 'middle' })

expect(scrollY).toBeGreaterThan(10)

Check failure on line 74 in extensions/roller/e2e/scroll.test.ts

View workflow job for this annotation

GitHub Actions / build

e2e/scroll.test.ts > should trigger auto-scrolling on middle click and mouse movement 

AssertionError: expected 0 to be greater than 10
 ❯ e2e/scroll.test.ts:74:19
})

it('should trigger auto-scrolling on Ctrl+Left click if ctrlClick is enabled', async () => {
Expand All @@ -97,30 +89,18 @@
})
expect(scrollY).toBe(0)

// Press Ctrl key
// Press Ctrl key, then drag left click past the threshold to activate scrolling
await page.keyboard.down('Control')

// Move and press left click
await page.mouse.move(200, 200)
await page.mouse.down({ button: 'left' })
await new Promise((r) => setTimeout(r, 100))

await page.mouse.up({ button: 'left' })

// Release Ctrl key
await page.mouse.move(200, 215)
await page.keyboard.up('Control')

await new Promise((r) => setTimeout(r, 100))

// Move mouse downward
await page.mouse.move(200, 300)

await new Promise((r) => setTimeout(r, 1500))

scrollY = await page.evaluate(() => window.scrollY)

// Stop scrolling
await page.mouse.down({ button: 'left' })
await page.mouse.up({ button: 'left' })

expect(scrollY).toBeGreaterThan(10)
Expand Down Expand Up @@ -152,16 +132,10 @@
})
expect(innerScrollY).toBe(0)

// Middle click inside the box
// Middle click inside the box and drag past the threshold to activate scrolling
await page.mouse.move(innerBoxRect.x, innerBoxRect.y)
await page.mouse.down({ button: 'middle' })
await new Promise((r) => setTimeout(r, 100))

await page.mouse.up({ button: 'middle' })
await new Promise((r) => setTimeout(r, 100))

// Move mouse downward within the box bounds
await page.mouse.move(innerBoxRect.x, innerBoxRect.y + 100)
await page.mouse.move(innerBoxRect.x, innerBoxRect.y + 15)

await new Promise((r) => setTimeout(r, 1500))

Expand All @@ -172,8 +146,7 @@
})

// Stop scrolling
await page.mouse.down({ button: 'left' })
await page.mouse.up({ button: 'left' })
await page.mouse.up({ button: 'middle' })

expect(mainScrollY).toBe(0) // Window shouldn't have scrolled
expect(innerScrollY).toBeGreaterThan(10) // Inner box should have scrolled
Expand All @@ -188,7 +161,6 @@
moveSpeed: 10,
stickyScroll: false,
innerScroll: true,
scrollOnLinks: true,
sameSpeed: false,
capSpeed: 10,
shouldCap: false,
Expand Down Expand Up @@ -229,7 +201,7 @@
expect(scrollY).toBeLessThan(5)
})

it('should NOT trigger scroll on links when scrollOnLinks is disabled, but should when enabled', async () => {
it('should trigger scrolling when dragging on a link past the drag threshold', async () => {
// Reset all roller options to defaults
await extensionRealm.evaluate(() => {
Object.assign(window.roller.options, {
Expand All @@ -238,7 +210,6 @@
moveSpeed: 10,
stickyScroll: true,
innerScroll: true,
scrollOnLinks: true,
sameSpeed: false,
capSpeed: 10,
shouldCap: false,
Expand All @@ -249,85 +220,87 @@
})
await new Promise((r) => setTimeout(r, 200))

// Set up a page with a link and tall body for scrolling
// Set up a page with a link and tall body
await page.evaluate(() => {
document.body.innerHTML = `
<a href="#" id="test-link" style="display:block;margin:100px;padding:40px;border:1px solid black">Click me</a>
<div style="height:5000px"></div>
`
})
// Wait a moment for page to settle
await new Promise((r) => setTimeout(r, 200))

// Get the link coordinates
const linkRect = await page.evaluate(() => {
const link = document.getElementById('test-link')
const rect = link!.getBoundingClientRect()
return {
x: rect.left + rect.width / 2,
y: rect.top + rect.height / 2,
}
return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
})

// Reset scroll and assert
await page.evaluate(() => window.scrollTo(0, 0))
let scrollY = await page.evaluate(() => window.scrollY)
expect(scrollY).toBe(0)

// Test with scrollOnLinks: false
await extensionRealm.evaluate(() => {
window.roller.options.scrollOnLinks = false
})
await new Promise((r) => setTimeout(r, 200))

// Middle-click on the link
// Middle-click on the link and drag down past the threshold while holding
await page.mouse.move(linkRect.x, linkRect.y)
await page.mouse.down({ button: 'middle' })
await new Promise((r) => setTimeout(r, 100))
await page.mouse.up({ button: 'middle' })
await new Promise((r) => setTimeout(r, 100))

// Move mouse down
await page.mouse.move(linkRect.x, linkRect.y + 100)
await page.mouse.move(linkRect.x, linkRect.y + 50)
await new Promise((r) => setTimeout(r, 1500))

// Read scrollY
scrollY = await page.evaluate(() => window.scrollY)

// Stop scrolling
await page.mouse.up({ button: 'middle' })
await page.mouse.down({ button: 'left' })
await page.mouse.up({ button: 'left' })

// Assert scroll did NOT occur
expect(scrollY).toBeLessThan(5)
expect(scrollY).toBeGreaterThan(10)
})

// Now test with scrollOnLinks: true
it('should NOT trigger scrolling when clicking a link without dragging past the threshold', async () => {
// Reset all roller options to defaults
await extensionRealm.evaluate(() => {
window.roller.options.scrollOnLinks = true
Object.assign(window.roller.options, {
dragThreshold: 10,
moveThreshold: 10,
moveSpeed: 10,
stickyScroll: true,
innerScroll: true,
sameSpeed: false,
capSpeed: 10,
shouldCap: false,
ctrlClick: false,
middleClick: true,
disableOnWindows: true,
})
})
await new Promise((r) => setTimeout(r, 200))

// Reset scroll back to 0
await page.evaluate(() => {
document.body.innerHTML = `
<a href="#" id="test-link" style="display:block;margin:100px;padding:40px;border:1px solid black">Click me</a>
<div style="height:5000px"></div>
`
})
await new Promise((r) => setTimeout(r, 200))

const linkRect = await page.evaluate(() => {
const link = document.getElementById('test-link')
const rect = link!.getBoundingClientRect()
return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
})

await page.evaluate(() => window.scrollTo(0, 0))
let scrollY = await page.evaluate(() => window.scrollY)
expect(scrollY).toBe(0)

// Repeat the middle-click on the link
// Middle-click on the link and release immediately without dragging
await page.mouse.move(linkRect.x, linkRect.y)
await page.mouse.down({ button: 'middle' })
await new Promise((r) => setTimeout(r, 100))
await new Promise((r) => setTimeout(r, 50))
await page.mouse.up({ button: 'middle' })
await new Promise((r) => setTimeout(r, 100))

// Move mouse down
await page.mouse.move(linkRect.x, linkRect.y + 100)
await new Promise((r) => setTimeout(r, 1500))
// Wait to confirm no scrolling starts
await new Promise((r) => setTimeout(r, 1000))

// Read scrollY again
scrollY = await page.evaluate(() => window.scrollY)

// Stop scrolling
await page.mouse.down({ button: 'left' })
await page.mouse.up({ button: 'left' })

// Assert scroll DID occur
expect(scrollY).toBeGreaterThan(10)
expect(scrollY).toBeLessThan(5)
})
Loading
Loading