javascript - scrollIntoView() method implementation

Question

Using javascript we can bring an element into view using -

document.getElementById('pluginsource_wrapper').scrollIntoView();

I can understand the concept of scrollIntoView() method but just wanted to know its code and understand how it is implemented.

Could you please point me to the code where I can find implementation of scrollIntoView()?

Answer 1

scrollIntoView()

The scrollIntoView() method scrolls the element's parent container such that the element on which scrollIntoView() is called is visible to the user.

---

Implementation of scrollIntoView()

The CSSOM View Module specification contains the sequence of steps performed by scrollIntoView() and are as follows:

1. Let behavior be "auto".
2. Let block be "start".
3. Let inline be "nearest".
4. If arg is a ScrollIntoViewOptions dictionary, then:
   • Set behavior to the behavior dictionary member of options.
   • Set block to the block dictionary member of options.
   • Set inline to the inline dictionary member of options.
5. Otherwise, if arg is false, then set block to "end".
6. If the element does not have any associated layout box, then return.
7. Scroll the element into view with behavior, block, and inline.
8. Optionally perform some other action that brings the element to the user’s attention.

---

Steps for Scroll the element into view

To scroll an element into view element, with a scroll behavior behavior, a block flow direction position block, and an inline base direction position inline, means to run these steps for each ancestor element or viewport that establishes a scrolling box scrolling box, in order of innermost to outermost scrolling box:

1. If the Document associated with element is not same origin with the Document associated with the element or viewport associated with box, terminate these steps.
2. Let element bounding border box be the box that the return value of invoking getBoundingClientRect() on element represents.
3. Let scrolling box edge A be the beginning edge in the block flow direction of scrolling box, and let element edge A be element bounding border box’s edge on the same physical side as that of scrolling box edge A.
4. Let scrolling box edge B be the ending edge in the block flow direction of scrolling box, and let element edge B be element bounding border box’s edge on the same physical side as that of scrolling box edge B.
5. Let scrolling box edge C be the beginning edge in the inline base direction of scrolling box, and let element edge C be element bounding border box’s edge on the same physical side as that of scrolling box edge C.
6. Let scrolling box edge D be the ending edge in the inline base direction of scrolling box, and let element edge D be element bounding border box’s edge on the same physical side as that of scrolling box edge D.
7. Let element height be the distance between element edge A and element edge B.
8. Let scrolling box height be the distance between scrolling box edge A and scrolling box edge B.
9. Let element width be the distance between element edge C and element edge D.
10. Let scrolling box width be the distance between scrolling box edge C and scrolling box edge D.

11. Let position be the scroll position scrolling box would have by following these steps:

    • If block is "start", then align element edge A with scrolling box edge A.
    • Otherwise, if block is "end", then align element edge B with scrolling box edge B.
    • Otherwise, if block is "center", then align the center of element bounding border box with the center of scrolling box in scrolling box’s block flow direction.

    • Otherwise, block is "nearest":

      If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B
      Do nothing.
      If element edge A is outside scrolling box edge A and element height is less than scrolling box height
      If element edge B is outside scrolling box edge B and element height is greater than scrolling box height
      Align element edge A with scrolling box edge A.
      If element edge A is outside scrolling box edge A and element height is greater than scrolling box height
      If element edge B is outside scrolling box edge B and element height is less than scrolling box height
      Align element edge B with scrolling box edge B.
      

    • If inline is "start", then align element edge C with scrolling box edge C.

    • Otherwise, if inline is "end", then align element edge D with scrolling box edge D.
    • Otherwise, if inline is "center", then align the center of element bounding border box with the center of scrolling box in scrolling box’s inline base direction.

    • Otherwise, inline is "nearest":

      If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D
      Do nothing.
      If element edge C is outside scrolling box edge C and element width is less than scrolling box width
      If element edge D is outside scrolling box edge D and element width is greater than scrolling box width
      Align element edge C with scrolling box edge C.
      If element edge C is outside scrolling box edge C and element width is greater than scrolling box width
      If element edge D is outside scrolling box edge D and element width is less than scrolling box width
      Align element edge D with scrolling box edge D.
      

12. If position is the same as scrolling box’s current scroll position, and scrolling box does not have an ongoing smooth scroll, then return.

13. If scrolling box is associated with an element

    Let associated element be the element.
    

14. If scrolling box is associated with a viewport

    Let document be the viewport’s associated Document. Let associated element be document’s root element, if there is one, or null otherwise.
    

15. Perform a scroll of scrolling box to position, associated element as the associated element and behavior as the scroll behavior.