BeaconCMS/beacon

Preserve scroll position

Offen

#123 geöffnet am 31.01.2023

Auf GitHub ansehenContributor Guide
 (3 Kommentare) (1 Reaktion) (0 zugewiesene Personen)Elixir (120 Forks)batch import
enhancementgood first issue

Repository-Metriken

Stars
 (1.194 Sterne)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

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

Research-Richtung
Untersuchen Sie die Implementierung von ember router scroll für die Logik zur Beibehaltung der Scroll Position und passen Sie sie an die Navigation von Phoenix LiveView an. Konzentrieren Sie sich auf die Behandlung der Scroll Position bei Vor /Zurück Navigation und beim Neuladen der Seite.
Tech Stack
elixirjavascript
Domain
frontend
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
ElixirJavaScriptPhoenix LiveView
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
50