Element’s common location API

1. The offset series

• 1.1 offsetWidth

  Content + padding + border widthCopy the code

• 1.2 offsetHeight

  Content height + padding height + border height content + padding + borderCopy the code

• 1.3 offsetTop

  Margin height + parent inner margin height margin + offsetParent.paddingCopy the code

• 1.4 the offsetLeft

  Margin width + parent inner margin width margin + offsetParent.paddingCopy the code

• 1.5 the offsetParent

  The first element of its parent element to have the following property: offsetParent 1. position set to non-static 2. This element is table, TD,th,body. 3Copy the code

2. Scroll series

• 2.1 scrollWidth

  Width of the child element = content width + padding width + border width + padding width Child.width = child.content + child.padding +  child.border + child.marginCopy the code

• 2.2 scrollHeight

  Height + padding Height = content area height + padding height + border height + padding height  + child.border + child.marginCopy the code

• 2.3 scrollTop

  The vertical height of the child elementCopy the code

• 2.4 scrollLeft

  The horizontal roll width of the child elementCopy the code

3. The client series

• 3.1 clientWidth

  Conten + paddingCopy the code

• 3.2 clientHeight

  Content area height + padding height content + paddingCopy the code

• 3.3 clientTop

  Border height borderCopy the code

• 3.4 clientLeft

  Border widthCopy the code

4. Note

• 4.1 Difference between clientWidth and scrollWidth

  2. When a scroll bar is present, clientWidth subtracts the width of the scroll barCopy the code

• 4.2 Calculate the pageY and pageX of elements using the offset series

  # if there are multiple offsetParent values and border values, Function pageX(ele) {let x = 0; while(e.offsetParent) { x += x.offfsetLeft; e = e.offsetParent; } return x; } function pageY(ele) { let y = 0; while(ele.offsetParent) { y += ele.offsetTop; ele = ele.offsetParent; } return ele; }Copy the code

• 4.3 Calculating the appearance of scrolling elements in viewports

  Project address https://joinwen.github.io/scroll-show/example2.html https://github.com/joinwen/scroll-show previewCopy the code

• 4.4 Judgment Scroll to the top

  (wrapper.scrollTop === 0) ? "Top" : "Not top"Copy the code

• 4.5 Determine the bottom of the scroll

  (wrapper.scrollTop + wrapper.clientHeight === wrapper.scrollHeight) ? "Bottom" : "Not bottom"Copy the code