Scroll scroll correlation in JS
Scroll, scroll, generally discusses the relationship between the overall web page and the browser.
I. Elemental correlation
|element.scrollHeight||Returns the overall height of the element.|
|element.scrollWidth||Returns the overall width of the element.|
|element.scrollLeft||Returns the distance between the left edge of the element and the view.|
|element.scrollTop||Returns the distance between the edge on the element and the view.|
These four attributes are all read-only attributes
Among them, nothing is more than dividing into
1. scroll Height and scroll Width
- Use scrollHeight and scrollWidth attributes to return the height of the element in px, including padding
- The values returned by scrollHeight and scrollWidth include the currently invisible parts.
- ScrollHeight and scrollWidth attributes are read-only attributes
2. scrollLeft and scrollTop
- Need a listening method
- There are also browser compatibility issues
II. Window correlation
1. scrollBy () and scrollTo () of windows objects
The scrollBy (x, y) method scrolls the document displayed in the current window, and X and Y specify the relative amount of scrolling.
ScrollBy (0, 200) ==> increases the position of the Y axis of the scrollbar by 200 on the current basis. For example: the current Y axis position is 0, after execution is 200; the current is 100, after execution is 300.
- To make this method work, the visible property of the window scrollbar must be set to true!
- XPOS is required. The x coordinates of the document to be displayed in the upper left corner of the window document display area.
- YPOS is required. The y coordinates of the document to be displayed in the upper left corner of the window document display area.
ScrollTo (x, y) method: Scroll the document displayed in the current window so that the points specified by coordinates x and Y in the document are in the display area