From efcfe63b04ef4bfa3fe2a30173b8b348e7a32fcf Mon Sep 17 00:00:00 2001 From: Holger Benl Date: Wed, 27 May 2026 15:18:37 +0200 Subject: [PATCH] Add scrollIntoView action --- index.html | 290 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 241 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 1136d210..e8cfcf0c 100644 --- a/index.html +++ b/index.html @@ -4496,27 +4496,43 @@

Elements

or if it is not connected.

To scroll into view - an element - perform the following steps - only if the element is not already in view: + a node + given optional arguments onlyIfNecessary (default true), + behavior (default "instant"), + block (default "end") + and inline (default "nearest"):

    -

  1. Let options be - the following ScrollIntoViewOptions: +

  2. Let target be determined as follows: -

    -
    "behavior" -
    "instant" +
    +
    node implements {{Element}} + and has an associated [=CSS/box=] +
    +
      +

    1. Let target be node. + +

    2. If onlyIfNecessary is true + and target is in view, return. +

    -
    Logical scroll position "block" -
    "end" +
    Otherwise +
    +
      +

    1. Let target be a new {{Range}} obtained by calling + {{Document/createRange()}} on node's [=Node/node document=] + and then invoking {{Range/selectNodeContents()}} on it with node + as argument. -

      Logical scroll position "inline" -
      "nearest" +

    2. If onlyIfNecessary is true + and target is in view, return. +

    -

  3. Run Function.[[\Call]](scrollIntoView, options) - with element as the this value. +

  4. Scroll target into view + with scroll behavior behavior, + block flow direction position block, + and inline base direction position inline.

Editable elements @@ -4716,6 +4732,46 @@

Interactability

  • Return the elements from point given the coordinates center point. + +

    A {{Range}} is in view + if the first {{DOMRect}} + returned by calling {{Range/getClientRects()}} on it + overlaps the viewport. + It can be checked this way: + +

      +

    1. Let rectangles be + the {{DOMRect}} sequence + returned by calling {{Range/getClientRects()}} on the {{Range}}. + +

    2. If rectangles has the length of 0, return false. + +

    3. Let rectangle be the first object in rectangles. + +

    4. Return true if all of the following conditions are true, + and false otherwise: +

      +
    @@ -7895,6 +7951,10 @@

    Null input source

    a tick, or as a placeholder to indicate that an input source does nothing during a particular tick. + + scrollIntoView + Used to scroll a particular node into the viewport. +

    To create a null input source, return a new null input @@ -7943,8 +8003,9 @@

    Key input source

    -

    A key input source supports the same pause action -as a null input source plus the following actions: +

    A key input source supports the same pause +and scrollIntoView actions as a null input source +plus the following actions: @@ -8012,8 +8073,9 @@

    Pointer input source

    -

    A pointer input source supports the same pause action as - a null input source plus the following actions: +

    A pointer input source supports the same pause + and scrollIntoView actions as a null input source + plus the following actions: @@ -8058,8 +8120,8 @@

    Wheel input source

    A wheel input source is an input source that is associated with a wheel-type input device. A wheel input source has no type specific items, and supports the - same pause action as a null input source plus the - following actions: + same pause and scrollIntoView actions as a null + input source plus the following actions:

    @@ -8507,13 +8569,13 @@

    Processing actions

  • If type is "none" let action be the result of trying to process - a null action with parameters id, and - action item. + a null action with parameters id, + action item, and actions options.

  • Otherwise, if type is "key" let action be the result of trying to process - a key action with parameters id, and - action item. + a key action with parameters id, + action item, and actions options.

  • Otherwise, if type is "pointer" let action be the result of trying to process @@ -8583,7 +8645,7 @@

    Processing actions

    To process a null action given -id and action item: +id, action item, and actions options:

    1. @@ -8591,7 +8653,9 @@

      Processing actions

      named "type" from action item.

    2. -If subtype is not "pause", +If subtype is not one of the values +"pause" +or "scrollIntoView", return error with error code invalid argument.

    3. @@ -8601,17 +8665,20 @@

      Processing actions

      and subtype.

    4. -Let result be the result -of trying to process a pause action +If subtype is "pause", +return the result of trying to process a pause action with arguments action item and action.

    5. -Return result. +If subtype is "scrollIntoView", +return the result of trying to process a scrollIntoView action +with arguments action item, action, +and actions options.

    To process a key action given -id and action item:

    +id, action item, and actions options:

    1. @@ -8622,7 +8689,8 @@

      Processing actions

      If subtype is not one of the values "keyUp", "keyDown", -or "pause", +"pause", +or "scrollIntoView", return an error with error code invalid argument.

    2. @@ -8633,10 +8701,15 @@

      Processing actions

    3. If subtype is "pause", -let result be the result +return the result of trying to process a pause action with arguments -action item and action, -and return result. +action item and action. + +

    4. +If subtype is "scrollIntoView", +return the result +of trying to process a scrollIntoView action with arguments +action item, action, and actions options.

    5. Let key be the result of getting a property named "value" from action item. @@ -8669,7 +8742,8 @@

      Processing actions

      "pointerUp", "pointerDown", "pointerMove", -or "pointerCancel", +"pointerCancel", +or "scrollIntoView", return an error with error code invalid argument.

    6. @@ -8680,10 +8754,17 @@

      Processing actions

    7. If subtype is "pause", -let result be the result of trying to +return the result of trying to process a pause action with arguments action item, action, and actions -options, and return result. +options. + +

    8. +If subtype is "scrollIntoView", +return the result of trying to +process a scrollIntoView action with arguments +action item, action, and actions +options.

    9. Set the pointerType property of action @@ -8722,9 +8803,10 @@

      Processing actions

      from action item.

    10. -If subtype is not the value -"pause", or +If subtype is not one of the values +"pause", "scroll", +or "scrollIntoView", return an error with error code invalid argument.

    11. @@ -8735,10 +8817,15 @@

      Processing actions

    12. If subtype is "pause", -let result be the result of trying to +return the result of trying to process a pause action with arguments -action item and action, -and return result. +action item and action. + +

    13. +If subtype is "scrollIntoView", +return the result of trying to +process a scrollIntoView action with arguments +action item, action, and actions options.

    14. Let duration be the result of getting a property @@ -8833,6 +8920,76 @@

      Processing actions

    15. Return success with data action.

    +

    To process a scrollIntoView action given action item, +action, and actions options:

    + +
      +

    1. Let node be the result of getting the property + "node" from action item. + +

    2. If actions options' is element origin steps + given node return false, return error with + error code invalid argument. + +

    3. Set the node property of action + to node. + +

    4. Let onlyIfNecessary be the result of getting the + property "onlyIfNecessary" from action item. + +

    5. If onlyIfNecessary is undefined, let + onlyIfNecessary be true. + +

    6. If onlyIfNecessary is not a boolean, return + error with error code invalid argument. + +

    7. Set the onlyIfNecessary property of action + to onlyIfNecessary. + +

    8. Let behavior be the result of getting the property + "behavior" from action item. + +

    9. If behavior is undefined, let + behavior be "instant". + +

    10. If behavior is not one of the values + "auto", "instant" or "smooth", return error + with error code invalid argument. + +

    11. Set the behavior property of action + to behavior. + +

    12. Let block be the result of getting the property + "block" from action item. + +

    13. If block is undefined, let + block be "end". + +

    14. If block is not one of the values + "start", "center", "end", + or "nearest", return error with + error code invalid argument. + +

    15. Set the block property of action + to block. + +

    16. Let inline be the result of getting the property + "inline" from action item. + +

    17. If inline is undefined, let + inline be "nearest". + +

    18. If inline is not one of the values + "start", "center", "end", + or "nearest", return error with + error code invalid argument. + +

    19. Set the inline property of action + to inline. + +

    20. Return success with data action. +

    +

    To process a pointer up or pointer down action given action item, and action:

    @@ -9266,16 +9423,20 @@

    Dispatching actions

    • source type subtype Dispatch action algorithm
    "none" "pause" Dispatch a pause action +
    "none" "scrollIntoView" Dispatch a scrollIntoView action
    "key" "pause" Dispatch a pause action
    "key" "keyDown" Dispatch a keyDown action
    "key" "keyUp" Dispatch a keyUp action +
    "key" "scrollIntoView" Dispatch a scrollIntoView action
    "pointer" "pause" Dispatch a pause action
    "pointer" "pointerDown" Dispatch a pointerDown action
    "pointer" "pointerUp" Dispatch a pointerUp action
    "pointer" "pointerMove" Dispatch a pointerMove action
    "pointer" "pointerCancel" Dispatch a pointerCancel action +
    "pointer" "scrollIntoView" Dispatch a scrollIntoView action
    "wheel" "pause" Dispatch a pause action
    "wheel" "scroll" Dispatch a scroll action +
    "wheel" "scrollIntoView" Dispatch a scrollIntoView action

  • Try to run algorithm with arguments @@ -9330,6 +9491,39 @@

    General actions

    1. Return success with data null.

    + +

    To dispatch a scrollIntoView action given action +object, source, global key state, +tick duration, browsing context, +and actions options: + +

      +

    1. Let node be the result of trying to run + actions options' get element origin steps with + the node property of action object + and browsing context. + +

    2. If node is null, return error with + error code no such element. + +

    3. Let onlyIfNecessary be the onlyIfNecessary + property of action object. + +

    4. Let behavior be the behavior + property of action object. + +

    5. Let block be the block + property of action object. + +

    6. Let inline be the inline + property of action object. + +

    7. Scroll into view node with + onlyIfNecessary, behavior, block, + and inline. + +

    8. Return success with data null. +

    • @@ -11932,10 +12126,11 @@

    Index

    sometimes here referred to as the viewport. -
    The following properties are defined in - the CSS Display Module Level 3 specification: [[CSS3-DISPLAY]] +
    The following terms are defined in + the CSS Display Module Level 4 specification: [[CSS-DISPLAY-4]]
    The following terms are defined in @@ -11972,10 +12167,7 @@

    Index

  • screenY
  • scrollX
  • scrollY -
  • scrollIntoView -
  • ScrollIntoViewOptions -
  • Logical scroll position "block" -
  • Logical scroll position "inline" +
  • scroll target into view
  • visual viewport