js the scroll scroll-related

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

Guess you like

Origin www.cnblogs.com/pythonywy/p/11617664.html