I’m working on resolving some tricky scrolling behavior for this site: Read only link here.
Context and my goals:
- The site is a single page with a series of sections that are each the full view height and width, with some copy centered in each.
- The desired behavior is to enforce scrolling such that the copy is always centered in the view. I’m doing this with scrollify.
- The other desired behavior is that whenever a user clicks or taps the copy they are automatically scrolled to the next section, again with the content centered. I implemented this with section IDs and links.
- Ideally each section would also be IDed such that we get corresponding Current Item nav link highlights.
Description of issue:
- The original section IDs/links didn’t work because they wouldn’t return to the section evenly centered on screen. I fixed this by creating special zero height sections specifically for positioning and linked to those.
- Scrollify, once implemented, creates its own IDs for each section.
- At some point everything seemed to be working, until after a few updates I noticed that no combination of solutions would result in the scrolling/linking behavior being persistently centered as desired.
- Even weirder, the scrolling and centering behavior differs depending on whether the page is view in incognito or not - even after a full cache refresh! This implies to me something weird happening under the hood with a cached behavior that I don’t understand.
Thoughts on the above? I sense there is something foundational in my approach that I need revisit. Thanks!