JS notes supplement the basic operation (xxii) DOM of

1. Check the scroll bar to scroll from

  • Syntax: window.pageXOffset / pageYOffset (scroll X / Y-axis)
  • Note: Distance is rolling pixel Home pixel +

 

2. Check the scroll bar to scroll from

  • Syntax: window.innerWidth / innerHeight

 

3. Review the elements of geometry

  • Syntax: DOMElement.getBoundingClientRect ();
  • Note 1:
    This method returns an object, the object which has left, top, right, bottom and other properties,
    left and top element representing the X and Y coordinates of the upper left corner,
    the X and Y coordinates of the lower right corner of the right and bottom of the representative elements.
  • Note 2:
    This method is not real-time, if the element changes occur but subsequent call the method's return value will not change.

 

4. Check the element size

  • Syntax: DOMElement.offsetWidth / offsetHeight
  • Note: seeking out is the size of an element looks, not including margins

 

5. Check the position of the element

  • Syntax: DOMElement.offsetLeft / offsetTop
  • Note:
    For positioning elements without the parent's return relative to the document coordinates
    for positioning the parent element, has recently returned relative positioning coordinates of the parent

Get recent positioning of the parent

  • Syntax: DOMElement.offsetParent
  • Note:
    Returns the recent positioning of a parent, if no return body
    body.offsetParent return null

 

6. Allow the scroll bar to scroll

  • Method:
    There are three methods on the window, respectively scroll (), scrollTo () and scrollBy () method,
    similar to the function of the three methods, the use of all incoming x, y coordinates, so scroll wheel to scroll to the desired location.

  • Difference: scrollBy () will do accumulate data on the basis of previous

  • Example:
    As scroll (0, 500) and scrollTo (0, 500) effect, is to scroll (0,500) in this position
     
    scrollBy (0, 500) is scrolled 0 pixels in the x-axis, y-axis scroll 500 distance pixels.
     
    obviously, scrollBy can be used as a continuous roll a certain distance function

Published 44 original articles · won praise 0 · Views 1085

Guess you like

Origin blog.csdn.net/leon9dragon/article/details/104051231