Difference between Scrolls

  • window.scrollX: current window horizontal offset number
  • window.scrollY: current window vertical offset number, For cross-browser compatibility, use window.pageYOffset instead of window.scrollY
  • window.pageYOffset: an alias for the scrollY property, but older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties, see: fully compatible example
  • window.scroll(x, y): absolute scroll
  • window.scrollTo(x, y): absolute scroll, effectively the same as widow.scroll(x, y)
  • window.scrollBy(x, y): relative scroll
  • window.scrollMaxX: the maximum number of pixels that the document can be scrolled horizontally
  • window.scrollMaxY: the maximum number of pixels that the document can be scrolled vertically
  • element.scrollIntoView(alignWithTop): scrolls elements into view
  • HTMLElement.offsetTop: returns the distance of the current element relative to the top of the offsetParent node
  • jQuery’s offset(): returns an object that includes the top and left offset of the element, e.g. Object{top: 223, left: 312.5}
  • jQuery’s offsetParent(): Get the closest ancestor element that is positioned
  • jQuery’s scrollTop(): wraps things up, but it’s the same thing. Also, it could be called to scroll compared to an element. See code below

Continue reading