elem size and scroll #jsdom

size-and-scrolling.js

// I never remember what properties define the size of element, window and page. Let this serve as a quick reference.
// For detailed info look at: http://javascript.info/size-and-scroll and http://javascript.info/size-and-scroll-window

// DOM ELEMENTS
//  OFFSET: size of the element WITH padding, border and scrollbar
//  CLIENT: size of the element WITHOUT padding, border or scrollbar
//  SCROLL: equivalent to SCROLL but including also scrolled out (not visible) area
//  TOP/LEFT propeties: the width of the space outside the sizing boundary and the next sizing boundary

// ELEM SIZES

// height and width of elem, no border, padding or scrollbar:
elem.clientWidth;
elem.clientHeigth;

// size of elem with border, padding and any scrollbars
elem.offsetWidth;
elem.offsetHeight;

// size of elem including scrolled out area (and border, padding and any scrollbars)
elem.scrollWidth;
elem.scrollHeigth;

// "OUTSIDE OF ELEM CONTENT" SIZES

// size of padding + border:
elem.clientTop;
elem.clientLeft;
// size of area in between elem border and neares CCS positioned ancestor boundaries
elem.offsetTop;
elem.offsetLeft;
// size of areas scrolled out
elem.scrollTop;

// WINDOW SIZE

// size of window content, WITHOUT SCROLLBARS
document.documentElement.clientHeight;
document.documentElement.clientWidth;
// size of window content, WITH SCROLLBARS
window.innerHeight;
window.innerWidth;

// Width/height of the document (including part scrolled out)
let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

// current scroll state of the page (equivalent to elem.clientTop and elem.clientLeft but for the window)
window.pageYOffset;
window.pageXOffset;

// Change current scroll:
window.scrollTo(0,0); // scroll to start of the page
window.scrollBy(0,10); // scroll down by 10px
elem.scrollIntoView(); // scrolls so that elem is at the top of the window

// Get coordinates of elem relative to WINDOW coordinates (not page coordinates)
elem.getBoundingClientRect(); // returns object with properties top, left, right and bottom

// Return elem at x,y coordinates of the WINDOW
let elem = document.elementFromPoint(30, 30);

// to get elem coordinates relative to the PAGE, combine getBoundingClientRect() and window.pageYOffset/window.pageXOffset