[data-scroll-offset="calc(100% - 100px), 0"]

Hello ,

Is your feature request related to a problem? Please describe.

As far as I know, it’s currently impossible to have scroll-offsets that are a mix of viewport-relative values and absolute values. I’ve found it to be a bit of a bummer in some instances.

A typical use case would be: you want the trigger to happen when the top of an element reaches the top of the viewport. If so, you can combine the default [data-scroll-position="start,end"] with [data-scroll-offset="100%, 0]", and it works well. But, if you happen to have something like a sticky navigation at the top that makes you want to offset the trigger slightly so that it starts when the top of the element is 100px below the top of the viewport, then you’re out of luck.

Describe the solution you'd like

Something like allowing [data-scroll-offset="calc(100% - 100px), 0"] would be really useful in these cases.

Or, maybe better yet, allowing a function call within the attributes: [data-scroll-offset-call="getScrollOffset"]. This would not only allow developers to have fine-tuned values, it would also give them the opportunity to have different values for different breakpoints.

Another nice option would be to pass a CSS custom property to the attribute ([data-scroll-offset="--scroll-offset, 0"]) and to read its value using .getComputedStyle($element).getPropertyValue('--scroll-offset'). It would only return a properly parsed and usable value if the custom property is typed (@property --scroll-offset), but it would allow for so much more flexibility.