🔰window scrolling
browser ⟩ DOM ⟩ type ⟩ Window ⟩ scroll
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).
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.
coordinates relative to document / viewport / container.
💾 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);Window ⟩
(.pageXOffset, .pageYOffset) - aliases for (.scrollX, .scrollY)
Last updated
Was this helpful?