HTMX中hx-swap的scroll与show修饰符有何差异？

两者都是控制内容替换后的滚动行为，但核心逻辑有明确差异：

• scroll：强制触发滚动，将页面（或目标元素）定位到替换后内容的位置，无论该内容原本是否在视口范围内。哪怕新内容已经在当前视口可见，也会滚动到指定的锚点（默认是内容顶部）。
  示例代码：

  <div hx-get="/load-more" hx-swap="innerHTML scroll"></div>
  

  加载新内容后，不管它原本是否在视野里，都会滚动到这个div的位置。

• show：仅在替换后的内容不在当前视口内时，才触发滚动操作，确保内容可见；如果内容已经在视口范围内，不会执行滚动。
  示例代码：

  <div hx-get="/detail" hx-swap="innerHTML show"></div>
  

  只有当加载的详情内容超出当前视野时，才会自动滚动到该位置，否则保持当前滚动状态。

额外细节：

• 两者都可结合top/bottom子修饰符，比如scroll:bottom表示滚动到内容底部，show:top表示内容不可见时滚动到顶部。
• 使用场景上，scroll适合需要强制定位到新内容的场景（比如加载列表后定位到新条目），show适合需要确保内容可见但不干扰当前视野的场景（比如展开折叠内容）。

内容的提问来源于stack exchange，提问作者B00TK1D