diff --git a/src/htmx.js b/src/htmx.js index 0bce3095..613a56ce 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -450,7 +450,7 @@ return (function () { } else { var newElt = eltBeforeNewContent.nextSibling; } - while(newElt && newElt != target) { + while(newElt && newElt !== target) { settleInfo.elts.push(newElt); newElt = newElt.nextSibling; } @@ -1328,6 +1328,12 @@ return (function () { if (modifier.indexOf("settle:") === 0) { swapSpec["settleDelay"] = parseInterval(modifier.substr(7)); } + if (modifier.indexOf("scroll:") === 0) { + swapSpec["scroll"] = modifier.substr(7); + } + if (modifier.indexOf("view:") === 0) { + swapSpec["view"] = modifier.substr(7); + } } } } @@ -1352,6 +1358,25 @@ return (function () { return {tasks: [], elts: [target]}; } + function updateScrollState(target, altContent, swapSpec) { + if (swapSpec.scroll) { + if (swapSpec.scroll === "top") { + target.scrollTop = 0; + } + if (swapSpec.scroll === "bottom") { + target.scrollTop = target.scrollHeight; + } + } + if (swapSpec.view) { + if (swapSpec.scroll === "top") { + target.scrollIntoView(true); + } + if (swapSpec.scroll === "bottom") { + target.scrollIntoView(false); + } + } + } + function issueAjaxRequest(elt, verb, path, eventTarget) { var target = getTarget(elt); if (target == null) { @@ -1520,6 +1545,7 @@ return (function () { pushUrlIntoHistory(pathToPush); triggerEvent(getDocument().body, 'pushedIntoHistory.htmx', {path:pathToPush}); } + updateScrollState(target, settleInfo.elts, swapSpec); } if (swapSpec.settleDelay > 0) { diff --git a/test/index.html b/test/index.html index 7a8960ad..96ea7887 100644 --- a/test/index.html +++ b/test/index.html @@ -36,6 +36,9 @@
  • Confirm & Prompt Test
    • +
  • + Scroll Test +

    • Mocha Test Suite

    diff --git a/test/manual/scroll-tests.html b/test/manual/scroll-tests.html new file mode 100644 index 00000000..8e47bbd6 --- /dev/null +++ b/test/manual/scroll-tests.html @@ -0,0 +1,29 @@ + + + + Test Scroll Behavior + + + + + + + +

    Prompt & Confirm Tests

    + +

    End

    +
    + Click To Add Content... +
    +
    +

    Start

    +
    + Click To Add Content... +
    + + + diff --git a/www/attributes/hx-swap.md b/www/attributes/hx-swap.md index 42f46e5d..802cecac 100644 --- a/www/attributes/hx-swap.md +++ b/www/attributes/hx-swap.md @@ -47,6 +47,28 @@ modifier: These attributes can be used to synchronize htmx with the timing of CSS transition effects. +You can also change the scrolling behavior of the target element by using the `scroll` and `view` modifiers, both +of which take the values `top` and `bottom`: + +```html + +
    + Get Some HTML & Append It & Scroll To Bottom +
    +``` + +```html + +
    + Get Some Content +
    +``` + ### Notes * `hx-swap` is inherited and can be placed on a parent element