Search code examples
htmx

Difference between HTMX hx-swap 'scroll' and 'show' modifiers

What is the difference between the HTMX modifiers scroll and show for hx-swap?

I know that both are used to control the behavior of the scrolling after the swap occurs, and I reviewed the documentation at https://htmx.org/attributes/hx-swap/, but I can't find anywhere that it distinguishes between them.

Solution

  • Take a look at the description in the swap-options docs.

    It's pretty much the same difference as between scrollTop and scrollIntoView, it's just the naming is a bit confusing I guess..

    In simple terms:

    • show scrolls target into the browser's viewport (using scrollIntoView)
    • scroll scrolls content in the target (using scrollTop)