Scroll to Animating Div

Hi, I have 'a' tags in my header with href pointing to a div that has animation. The animation applied to the div translates it along Y axis. I have used animation-timeline: scroll() on the div. So, as I scroll the page, the div translates (parallax effect (I have so many moving divs)). But the main issue is, due to this animation, when I click on the 'a' tag it is not taking me to the expected position because the div is translating. I thought of using offset, but since the animation speed depends on height of the total page (scroll-length), its very dynamic and I have no idea what to do. Any idea how to fix this without changing much structure?
6 Replies
Tok124 (CSS Nerd)
Searching for the codepen link hmm
iDropPanties
iDropPanties12mo ago
Note: Please open in chrome. animation-timeline currently not supported by many browsers
Tok124 (CSS Nerd)
@iDropPantiesYou can try use the scroll-padding property https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding
MDN Web Docs
scroll-padding - CSS: Cascading Style Sheets | MDN
The scroll-padding shorthand property sets scroll padding on all sides of an element at once, much like the padding property does for padding on an element.
iDropPanties
iDropPanties12mo ago
but the more i scroll, the more the animating element translates rigjt how can a fixed padding help this help pls:(
Want results from more Discord servers?
Add your server