mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-27 13:01:03 +00:00
Add config option to disable scroll into view for targets of boosted links and forms (#1459)
Thank you @xhaggi
This commit is contained in:
parent
61dac7d933
commit
f2d776c151
@ -74,7 +74,8 @@ return (function () {
|
||||
getCacheBusterParam: false,
|
||||
globalViewTransitions: false,
|
||||
methodsThatUseUrlParams: ["get"],
|
||||
selfRequestsOnly: false
|
||||
selfRequestsOnly: false,
|
||||
scrollIntoViewOnBoost: true
|
||||
},
|
||||
parseInterval:parseInterval,
|
||||
_:internalEval,
|
||||
@ -2665,7 +2666,7 @@ return (function () {
|
||||
"swapDelay" : htmx.config.defaultSwapDelay,
|
||||
"settleDelay" : htmx.config.defaultSettleDelay
|
||||
}
|
||||
if (getInternalData(elt).boosted && !isAnchorLink(elt)) {
|
||||
if (htmx.config.scrollIntoViewOnBoost && getInternalData(elt).boosted && !isAnchorLink(elt)) {
|
||||
swapSpec["show"] = "top"
|
||||
}
|
||||
if (swapInfo) {
|
||||
|
@ -121,6 +121,7 @@ Note that using a [meta tag](@/docs.md#config) is the preferred mechanism for se
|
||||
* `withCredentials:false` - boolean: allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates
|
||||
* `wsReconnectDelay:full-jitter` - string/function: the default implementation of `getWebSocketReconnectDelay` for reconnecting after unexpected connection loss by the event code `Abnormal Closure`, `Service Restart` or `Try Again Later`
|
||||
* `scrollBehavior:smooth` - string: the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link.
|
||||
* `scrollIntoViewOnBoost:true` - boolean: whether or not the target of a boosted element is scrolled into the viewport. If `hx-target` is omitted on a boosted element, the target defaults to `body`, causing the page to scroll to the top.
|
||||
|
||||
##### Example
|
||||
|
||||
|
@ -112,6 +112,15 @@ You may also use `window:top` and `window:bottom` to scroll to the top and botto
|
||||
</div>
|
||||
```
|
||||
|
||||
For boosted links and forms the default behaviour is `show:top`. You can disable it globally with
|
||||
[htmx.config.scrollIntoViewOnBoost](@/api.md#config) or you can use `hx-swap="show:none"` on an element basis.
|
||||
|
||||
```html
|
||||
<form action="/example" hx-swap="show:none">
|
||||
...
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Focus scroll
|
||||
|
||||
htmx preserves focus between requests for inputs that have a defined id attribute. By default htmx prevents auto-scrolling to focused inputs between requests which can be unwanted behavior on longer requests when the user has already scrolled away. To enable focus scroll you can use `focus-scroll:true`.
|
||||
|
Loading…
x
Reference in New Issue
Block a user