How to Persist Scroll Position with Hotwire Turbo
I hate it when I click a link in a sidebar, then you loose your place. With Hotwire Turbo you can pretty easily persist the scroll position of an element between page loads.
In this tutorial I show you how to look into the Hotwire Turbo event cycle to persist scroll positions of elements on your page.
Sources
➡ Source Code: https://github.com/MikeRogers0-YouTub...
➡ Source Code (JavaScript turbo-scroll.js file): https://github.com/MikeRogers0-YouTub...
➡ Hotwired@Turbo: https://www.npmjs.com/package/@hotwir...
➡ Turbo Event Reference: https://turbo.hotwire.dev/reference/e...
➡ data-turbo-permanent Code: https://github.com/hotwired/turbo/blo...
➡ Bridgetown: https://www.bridgetownrb.com/
Chapters
0:00 - What Are We Going To Do?
0:11 - What Is the Problem?
1:47 - data-turbo-permanent
3:13 - Turbo Lifecycles
5:12 - Persisting The Scroll Position
7:46 - Thank You
Follow Me Online
➡ Blog: https://mikerogers.io/
➡ Twitter: / mikerogers0
➡ GitHub: https://github.com/mikerogers0
➡ YouTube: / mikerogers0
➡ BuyMeACoffee: https://www.buymeacoffee.com/MikeRogers0
➡ Dev.to: https://dev.to/mikerogers0
#Hotwire #Turbo #Bridgetown