window scrolling

Window-reflecting body element event handlers：

if you assign one of the following event handlers on document.body, it will be reflected on window too, and vice versa.

onblur, onerror, onfocus, onload, onresize, onscroll

const body = document.body;
body.onblur = function f(){};        // assigned on body
window.onblur                        // f: reflected on window

window.onresize = function g(){};    // assigned on window
body.onresize                        // g: reflected on body

📗 Medium

window.scrollTo() takes the x and y coordinates in document coordinates and sets these as the scrollbar offsets (the browser will try its best to scroll the window so that the specified point is in the upper-left corner of the viewport).

calling elem.scrollIntoView() will try to put the top edge of the element at or near the top of the viewport.
you can use an options object {block:inline:} to control the vertical/horizontal alignment of the scrolling.

Window.scroll() is effectively the same as .scrollTo().
For relative scrolling, see .scrollBy(), .scrollByLines(), and .scrollByPages().
For scrolling elements, see Element.scrollTop and Element.scrollLeft.

To scroll the page with JavaScript, its DOM must be fully built, if we try to scroll the page with a script in <head> , it won’t work.

.boundingBox of Element will change after scrolling.
.paddingBox / .borderBox / .scrollBox
coordinates relative to document / viewport / container.
❗ window-reflecting body element event handlers

💾 replit: scrollToBottom()

// heights of the document and viewport.
const doc = { height: document.documentElement.offsetHeight };
const viewport = { height: window.innerHeight };
const scrollOffsetY = doc.height - viewport.height;

// scroll to the "bottom" of the page
window.scrollTo(0, scrollOffsetY);

JavaScript: The Definitive Guide (15.5 Document Geometry and Scrolling)
JS.info ⟩
- Window sizes and scrolling
- Element size and scrolling
你的 onscroll 不是你的 onscroll

Window ⟩
- .scrollTo()
- .scrollBy()
- (.scrollX, .scrollY) - scroll offsets of the document (read-only ⭐️)
- (.pageXOffset, .pageYOffset) - aliases for (.scrollX, .scrollY)
Element ⟩

web.dev

🔰window scrolling