JavaScript

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

jQuery’s scroll:

// Create scrollLeft and scrollTop methods
jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
	var top = /Y/.test( prop );

	jQuery.fn[ method ] = function( val ) {
		return access( this, function( elem, method, val ) {
			var win = getWindow( elem );

			if ( val === undefined ) {
				return win ? (prop in win) ? win[ prop ] :
					win.document.documentElement[ method ] :
					elem[ method ];
			}

			if ( win ) {
				win.scrollTo(
					!top ? val : jQuery( win ).scrollLeft(),
					top ? val : jQuery( win ).scrollTop()
				);

			} else {
				elem[ method ] = val;
			}
		}, method, val, arguments.length, null );
	};
});

 

Fully compatible scroll with jQuery&TweenMax (from current position to Target):

scroll = y: $document.scrollTop()
    
  TweenMax.to scroll, 1,
    y: Target
    ease: Power2.easeOut
    onUpdate: ->
      $(document).scrollTop(scroll.y)
Standard