preface

Project development often need to use element size, page height, viewport height, all kinds of distance and so on, this article summarizes the method of obtaining all kinds of width height, distance.

The element size

Sacrifice a few pieces of the red Book god map, simple and clear 😄





Summary of various methods

Note: these methods do not take into account promiscuous mode, please make sure your document is in standard mode (with the correct DOCtype) or you will get incorrect values.

1. Get the height and width of the entire page

Code instructions

1. Firefox is not compatible with Document. body, so use Document. documentElement

2. In theory, scrollHeight is the same as clientHeight without the scrollbar. In fact, every browser handles it differently, so it’s safest to choose the largest of the two.

function getPagearea() {return {
      width: Math.max(document.documentElement.scrollWidth,
             document.documentElement.clientWidth),
      height: Math.max(document.documentElement.scrollHeight,
              document.documentElement.clientHeight)
  }
}Copy the code

$(document).height(); $(document).width();

2. Obtain the height and width of the viewport

Code instructions

Document. documentElement is not compatible with Document. body, so use document.documentElement

function getViewport() {return{width: the document. The documentElement. ClientWidth, height: the document. The documentElement. ClientHeight}}Copy the code

$(window).height(); $(window).width();

3. Get the height of the element from the page

functiongetElementTop(el) {letactualTop = el.offsetTop;letcurrent = el.offsetParent;while(current ! == null) {actualTop += current.offsetTop; The current = current. The offsetParent; }return actualTop;
}Copy the code

PS: jq jq object offset().top Jq object offset().left

4. Get the distance from the element to the viewport

Use the el.getBoundingClientRect method

The getBoundingClientRect method returns the size of the element and its position relative to the viewport.



5. Obtain the vertical scroll bar height or horizontal scroll bar length

Code instructions

Same as 1, Firefox does not support Document. body, so use document.documentElement

function getScrollTop() {
     let doc = document;
     return Math.max(doc.body.scrollTop, doc.documentElement.scrollTop)
};

function getScrollLeft() {
     let doc = document;
     return Math.max(doc.body.scrollLeft, doc.documentElement.scrollLeft)
};Copy the code

6. Get distance from mouse to element, viewport, document, screen

This mainly reads the value of the Event object, as can be seen in the figure below.



A use example

Determine the presence of elements in the viewport as you scroll up and down

This example uses the above method

document.onscroll = () => {
    let dom = document.getElementById('box');
    lettop = getElementTop(dom); // Height of the element from the pageletscrollTop = getScrollTop(); // Get the scrollbar heightletviewPortHeight = getViewport().height; // Get the viewport widthif (top > scrollTop && top <= scrollTop + viewPortHeight) {
         console.log('Element appears'} // getBoundingClientRect document.onscroll = () => {let dom = document.getElementById('box2');
  let rectTop = dom.getBoundingClientRect().top;
  let viewPortHeight = getViewport().height; 
 
  if (rectTop > 0 && rectTop < viewPortHeight) {
      console.log('Element appears'Document.onscroll = () => {document.onscroll = () => {let $dom = $('#box');
  let top = $dom.offset().top;
  let scrollTop = $(window).scrollTop();
  let viewPortHeight = $(window).height();
  
  if (top > scrollTop && top <= scrollTop + viewPort.height) {
      console.log('Element appears')}}Copy the code