Strange and Standard Patterns

1. Browsers have weird and standard modes when parsing CSS for compatibility with older versions
2. Browser parses code according to w3c specification in standard mode
3. Parsing code according to browser's own specifications in bizarre mode will generally be backward compatible with 5 versions
4. Use <! DOCTYPE html> for the first sentence, then use the HTML5 specification, which is the standard mode, or use the weird mode without this sentence
5. Returning CSS1Compat using document.compatMode indicates standard mode, while returning BackCompat is bizarre

Scrollbar Scroll Distance

1. Common Writing

   // Get the distance between the scrollbar and the top/left side, that is, the page scroll distance
   window.pageYOffset/pageXOffset 
   document.bady.scrollTop/scrollLeft
   document.documentElement.scrollTop/scrollLeft
   window.scrollY/scollX
   

2. Compatibility Table

   (b) for bizarre patterns, (s) for standard patterns, C for chrome, F for firefox, O for opera

   Browser	IE6789(b)	IE678(s)	IE9(s)	C(bs)	O/F(b)	O/F(s)
   documentElement	0	available	available	0	0	available
   body	available	0	0	available	available	0
   pageOffset	undefined	undefined	available	available	available	available
   scroll	undefined	undefined	undefined	available	available	available

3. Compatibility Writing

   function getScrollOffset() {
       if (window.pageXOffset) {
           return {
               top: window.pageYOffset,
               left: window.pageXOffset
           }
       }
       else return {
           top:document.body.scrollTop || document.documentElement.scrollTop,
           left:document.body.scrollLeft || document.documentElement.scrollLeft
       }
   }
   

Visual Size of Window

1. Common Writing

   // Get the width and height of the viewing area of the window
   window.innerWidth/innerHeight // Includes scrollbars compatible with IE9 and above
   // window.outerWidrh/outerHeight contains toolbars and scrollbars, which are browser window sizes
   document.documentElement.clientWidth/clientHeight // Exclude scrollbars compatible with IE9 and below standard modes
   document.body.clientWidth/clientHeight // Includes scrollbars compatible with IE9 and below bizarre modes
   

2. Compatibility Writing

   function getViewportSize() {
           if (window.innerWidth) {
               return {
                   width: window.innerWidth,
                   height: window.innerHeight
               }
           } else {
               if (document.compatMode === 'BackCompat') {
                   return {
                       width: document.body.clientWidth,
                       height: document.body.clientHeight
                   }
               } else {
                   return {
                       width: document.documentElement.clientWidth,
                       height: document.documentElement.clientHeight
                   }
               }
           }
       }
   

Document Scroll Size

1. Common Writing

   // Get the total scrollable size of the document
   document.body.scrollHeight/scrollWidth
   document.documentElement.scrollHeight/scrollWidth
   // Prefer body.scrollHeight
   // DoumentElement.scrollHeight has problems with lower versions of IE
   

2. Compatibility Writing

   function getScrollSize() {
       if (document.body.scrollHeight) {
           return {
               width: document.body.scrollWidth,
               height: document.body.scrollHeight
           }
       } else return {
           width: document.documentElement.scrollWidth,
           height: document.documentElement.scrollHeight
       }
   }
   

Element document coordinates

1. offsetParent

   offsetParent is the closest parent element of a non-default positioning when the element has no fixed positioning and returns body if it does not

   offsetParent returns null when the element has fixed positioning

   offsetParent of body is null

2. offsetTop/offsetLeft

   var div = document.getElementById("box");
   div.offsetTop/offsetLeft // Offset relative to offsetParent element
   

3. Gets the coordinates of an element in a document

   function getElemPositionInDoc(elem) {
       var parent = elem.offsetParent,
           top = elem.offsetTop,
           left = elem.offsetLeft;
       while (parent) {
           top += parent.offsetTop;
           left += parent.offsetLeft;
           parent = parent.offsetParent;
       }
       return {
           top: top,
           left: left
       }
   }
   

Window Scroll

1. Common Writing

   // Scroll to (x, y) coordinates
   // window.scroll() and scrollTo() function the same
   window.scrollTo(x, y);
   window.scrollTo({
      top: 100,
      behavior: 'smooth' // Smooth scrolling
   });
   

2. Scroll to Low Judgement Method

   window.innerHeight + window.pageYOffset >= document.body.scrollHeight
   // Window Visual Height + Vertical Scrollbar Scroll Distance >=Document Scroll Height
   // Note Write Compatibility