js the scroll scroll-related
scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。
I. related elements
Property / Method | Explanation |
---|---|
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 view element. |
element.scrollTop | Returns the distance between the edge of the view of the upper element. |
这四个属性,全部是只读属性
Which is nothing more than divided 宽高
and 左上
.
Both directions.
1.scrollHeight and scrollWidth
- Use scrollHeight scrollWidth property returns the element and the height of the unit is px, comprising padding
- scrollHeight scrollWidth and return values are not currently visible part comprises.
- scrollHeight property is read and scrollWidth
2.scrollLeft and scrollTop
- We need a listener method
- There is also a browser compatibility issue
II. Window-related
scrollBy 1.window object () and scrollTo ()
1.scrollBy(x,y)
scrollBy (x, y) The method of scrolling through the document currently displayed in the window, x and y specify the relative amount of scrolling.
scrollBy(0, 200) ==> 使得滚动条Y轴的位置,在当前的基础上增加200。比如:当前Y轴位置为0,执行后便是200;当前为100,执行后便是300。
- For this method to work window scroll bar must be visible property is set to true!
2.scrollTo(x,y)
scrollTo(xpos,ypos)
- xpos necessary. To the x coordinate of the upper left corner in the document window display area of the document.
- ypos necessary. Y coordinates of the upper left corner of the document to the document window of the display area.
scrollTo (x, y) method: Scroll document that is currently displayed in the window, let the points in the document specified by the x and y coordinates of the display area is located