Search code examples
cssjs-scrollintoview

What does it mean for a CSS element edge to be "outside" a scrolling box's edge?


What is the proper way to interpret the following specification?

"If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B, do nothing."


Source:

https://drafts.csswg.org/cssom-view/#dom-scrolllogicalposition-nearest:~:text=If%20element%20edge%20A%20and%20element%20edge%20B%20are%20both%20outside%20scrolling%20box%20edge%20A%20and%20scrolling%20box%20edge%20B

According to this answer, the definition of the above passage should be stays put, if it's already in view. If this is indeed the definition, then, shouldn't the passage be re-written as "element edge A is outside scrolling box edge A, and element edge B is inside scrolling box edge B"? Assuming "outside" means below, and "inside" means above (using the standard web coordinate system).

The CSS spec has been in this form since 2016, so the spec should be correct. What should be the proper way to interpret the spec?

Thanks!


Solution

  • "Outside" means the element is visible to the user. In contrast, "inside" means the element is located in an area that is invisible to the user. Therefore:

    • "outside scrolling box edge A" = below scrolling box edge A

    • "outside scrolling box edge B" = above scrolling box edge B