BeaconCMS / BeaconCMS/beacon

Preserve scroll position

Open
#123 3 comments 1 reaction 0 assignees View on GitHub
enhancement good first issue
Dominant language
Elixir
Stars
1.3k
Forks
134
PR merge metrics
No merged PRs in 30d

Description

This is a problem in LiveView but we can solve it on our own. Pages currently don't preserve scroll position. See:

https://user-images.githubusercontent.com/18524/215903473-99d47362-fac5-495d-b7ad-3071c45a5b61.mp4

I solved this a few years ago in ember-router-scroll: https://github.com/DockYard/ember-router-scroll/blob/master/addon/services/router-scroll.js

We'll need to pull in some JS resources to implement in Beacon. Two cases need to be accounted for:

1. preserving scroll position when navigating to a new page then back to the original
2. preserving scroll position when reloading a page (hard refresh also respects position)
3. if opening a new tab to the same URL or navigating *forward* from A, to B, and pushing a new instance of A to the history stack it shouldn't inherit the scroll position of the original visit of A but if I go back in history it should

Contributor guide

Open the contributing guide

Research direction

Start with the LiveView navigation behavior and the referenced ember-router-scroll implementation in addon/services/router-scroll.js. Verify the three listed history cases, including reloads and distinct forward navigations, and consider the work done when each preserves or resets scroll position as specified.

Written by the indexing model from the issue text.

Assessment

Tech stack
elixir, javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 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.