Is there a way to chain both window and debounce modifiers on x-on?

[robmcfadden]

I'd like to do x-on:scroll.window.debounce, but I'm finding that I can only do one or the other.

Is this possible? Is there a better way?

[SimoTod]

Hi @robmcfadden
You can usually chain debounce and window but the problem there is the scroll event.
As per W3C specifications, it doesn't bubble up but it can be only captured by the scrolled element.
If you put the window modifier, you are telling Alpine to execute the callback when the event reaches the window object which never happens.

If you need it, you can debounce the scroll event and capture it on the element then trigger a custom event that you will capture on window.

See https://codepen.io/SimoTod/pen/zYvJpdx

[robmcfadden]

Thank you!