重学之JavaScript HTML Element 常用API解析( 二 ) _API

If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position (at the start of the scrolled content), and then increasingly negative as you scroll towards the end of the content.
// Get the number of pixels scrolledvar sLeft = element.scrollLeft;sLeft is an integer representing the number of pixels that element has been scrolled from the left edge.
// Set the number of pixels scrolledelement.scrollLeft = 10;scrollLeft can be specified as any integer value. However:

If the element can't be scrolled (e.g., it has no overflow), scrollLeft is set to 0.
If specified as a value less than 0 (greater than 0 for right-to-left elements), scrollLeft is set to 0.
If specified as a value greater than the maximum that the content can be scrolled, scrollLeft is set to the maximum.

scrollTop
The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.
An element's scrollTop value 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 its scrollTop value is 0.
// Get the number of pixels scrolled.var intElemScrollTop = someElement.scrollTop;After running this code, intElemScrollTop is an integer corresponding to the number of pixels that the element's content has been scrolled upwards.
// Set the number of pixels scrolled.element.scrollTop = intValue;scrollTop can be set to any integer value, with certain caveats:

If the element can't be scrolled (e.g. it has no overflow or if the element has a property of "non-scrollable"), scrollTop is 0.
scrollTop doesn't respond to negative values; instead, it sets itself back to 0.
If set to a value greater than the maximum available for the element, scrollTop settles itself to the maximum value.

scroll?Width
The Element.scrollWidth read-only property is a measurement of the width of an element's content, including content not visible on the screen due to overflow.
The scrollWidth value is equal to the minimum width the element would require in order to fit all the content in the viewport without using a horizontal scrollbar. The width is measured in the same way as clientWidth: it includes the element's padding, but not its border, margin or vertical scrollbar (if present). It can also include the width of pseudo-elements such as ::before or ::after. If the element's content can fit without a need for horizontal scrollbar, its scrollWidth is equal to clientWidth

This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

scrollHeight
The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.
The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. The height is measured in the same way as clientHeight: it includes the element's padding, but not its border, margin or horizontal scrollbar (if present).It can also include the height of pseudo-elements such as ::before or ::after. If the element's content can fit without a need for vertical scrollbar, its scrollHeight is equal to clientHeight

This property will round the value to an integer. If you need a fractional value, use Element.getBoundingClientRect().

判断是否滚动到底部
// Determine if an element has been totally scrolledelement.scrollHeight - element.scrollTop === element.clientHeight// When the container does not scroll, but has overflowing children, these checks determine if the container can scroll:window.getComputedStyle(element).overflowY === 'visible'window.getComputedStyle(element).overflowY !== 'hidden'clientLeft
The width of the left border of an element in pixels. It includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding. clientLeft is read-only.
Gecko-based Applications support clientLeft starting with Gecko 1.9 (Firefox 3, implemented in bug 111207). This property is not supported in Firefox 2 and earlier.
clientTop
The width of the top border of an element in pixels. It is a read-only, integer property of element.
As it happens, all that lies between the two locations (offsetTop and client area top) is the element's border. This is because the offsetTop indicates the location of the top of the border (not the margin) while the client area starts immediately below the border, (client area includes padding.) Therefore, the clientTop value will always equal the integer portion of the .getComputedStyle() value for "border-top-width". (Actually might be Math.round(parseFloat()).) For example, if the computed "border-top-width" is zero, then clientTop is also zero.