About scroll
Properties to be discussed:
scrollY, pageYOffset, scrollTop, scrollHeight
ScrollY & pageYOffset:
The read-only
WindowpropertypageYOffsetis an alias forscrollY; as such, it returns the number of pixels the document is currently scrolled along the vertical axis (that is, up or down) with a value of 0.0, indicating that the top edge of theDocumentis currently aligned with the top edge of the window's content area.
Both are same and it’s value represents the amount the window has been vertically scrolled.
scrollTop:
The
Element.scrollTopproperty gets or sets the number of pixels that an element's content is scrolled vertically.An element’s
scrollTopvalue is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then itsscrollTopvalue is0.When
scrollTopis used on the root element (the<html>element), thescrollYof the window is returned. This is a special case ofscrollTop.
It is like scrollY but instead of window’s i.e root-container, it is of the container/element present inside the window. So, any element inside the window that gets a scroll bar can have this value more than 0.
scrollHeight:
The
Element.scrollHeightread-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.
Once an element gets a scroll-bar, the amount of space that is hidden below the element’s screen is called the scrollHeight. In other words it is the amount of vertical-scrolling required to make the element’s content reach the element’s screen’s bottom.
Properties’ horizontal counterpart:
scrollY will be scrollX;
pageYOffset will be pageXOffset;
scrollTop will be scrollLeft;
scrollHeight will be scrollWidth;
They behave the same. Instead of measuring vertically , measure it horizontally .
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Functions to scroll:
There are two functions we can use to command the browser to scroll. They are:
1. scrollTo(), 2.scrollBy();
1. ScrollTo():
If we want to scroll a particular element:
The
scrollTo()method of theElementinterface scrolls to a particular set of coordinates inside a given element.
element.scrollTo(x-coord, y-coord)If we want to scroll the whole window:
Window.scrollTo() scrolls to a particular set of coordinates in the document.
window.scrollTo(x-coord, y-coord)x-coordis the pixel along the horizontal axis of the document that you want displayed in the upper left.y-coordis the pixel along the vertical axis of the document that you want displayed in the upper left.
2. ScrollBy():
If we want to scroll a particular element:
The
scrollBy()method of theElementinterface scrolls an element by the given amount.
element.scrollBy(x-coord, y-coord)If we want to scroll the whole window:
The Window.scrollBy() method scrolls the document in the window by the given amount.
window.scrollBy(x-coord, y-coord)x-coordis the pixel along the horizontal axis of the document that you want displayed in the upper left.y-coordis the pixel along the vertical axis of the document that you want displayed in the upper left.
Difference between scrollTo() and scrollBy() is that in former we are directing to scroll to a particular coordinate whereas in the later we are directing to scroll by a particular length/distance.
The End.
