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