Scroll methods on elements
The scroll event fires when the document view has been scrolled. To detect when scrolling has completed, see the scrollend event of Document. For element scrolling, see scroll event of Element.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 6 | 2 | 18 | 1 | |
| The scrollingElement read-only property of the Document interface returns a reference to the Element that scrolls the document. In standards mode, this is the root element of the document, document.documentElement. | 44 | 12 | 48 | 9 | 44 | 9 |
| The scroll() method of the Element interface scrolls the element to a particular set of coordinates inside a given element. | 61 | 79 | 36 | 10.1 | 61 | 10.3 |
| The scroll event fires when an element has been scrolled. To detect when scrolling has completed, see the Element/scrollend_event event of Element. | 1 | 12 | 6 | 1.3 | 18 | 1 |
scroll (options behavior parameter) `options.behavior` parameter | 61 | 79 | 36 | 14 | 61 | 14 |
scroll (options left parameter) `options.left` parameter | 61 | 79 | 36 | 10.1 | 61 | 10.3 |
scroll (options top parameter) `options.top` parameter | 61 | 79 | 36 | 10.1 | 61 | 10.3 |
| The scrollBy() method of the Element interface scrolls an element by the given amount. | 61 | 79 | 36 | 10.1 | 61 | 10.3 |
scrollBy (options behavior parameter) `options.behavior` parameter | 61 | 79 | 36 | 14 | 61 | 14 |
scrollBy (options left parameter) `options.left` parameter | 61 | 79 | 36 | 10.1 | 61 | 10.3 |
scrollBy (options top parameter) `options.top` parameter | 61 | 79 | 36 | 10.1 | 61 | 10.3 |
| The scrollHeight read-only property of the Element interface is a measurement of the height of an element's content, including content not visible on the screen due to overflow. | 1 | 12 | 21 | 1 | 18 | 1 |
| The scrollLeft property of the Element interface gets or sets the number of pixels by which an element's content is scrolled from its left edge. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number. | 86 | 86 | 1 | 1 | 86 | 1 |
| The scrollTo() method of the Element interface scrolls to a particular set of coordinates inside a given element. | 61 | 79 | 36 | 10.1 | 61 | 10.3 |
scrollTo (options behavior parameter) `options.behavior` parameter | 61 | 79 | 36 | 14 | 61 | 14 |
scrollTo (options left parameter) `options.left` parameter | 61 | 79 | 36 | 10.1 | 61 | 10.3 |
scrollTo (options top parameter) `options.top` parameter | 61 | 79 | 36 | 10.1 | 61 | 10.3 |
| The scrollTop property of the Element interface gets or sets the number of pixels by which an element's content is scrolled from its top edge. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number. | 1 | 12 | 1 | 1 | 18 | 1 |
| The scrollWidth read-only property of the Element interface is a measurement of the width of an element's content, including content not visible on the screen due to overflow. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Window.scroll() method scrolls the window to a particular place in the document. | 1 | 12 | 1 | 1 | 18 | 1 |
scroll (options behavior parameter) `options.behavior` parameter | 61 | 79 | 36 | 14 | 61 | 14 |
scroll (options left parameter) `options.left` parameter | 41 | 79 | 36 | 10.1 | 41 | 10.3 |
scroll (options top parameter) `options.top` parameter | 41 | 79 | 36 | 10.1 | 41 | 10.3 |
| The Window.scrollBy() method scrolls the document in the window by the given amount. | 1 | 12 | 1 | 1 | 18 | 1 |
scrollBy (options behavior parameter) `options.behavior` parameter | 61 | 79 | 36 | 14 | 61 | 14 |
scrollBy (options left parameter) `options.left` parameter | 41 | 79 | 36 | 10.1 | 41 | 10.3 |
scrollBy (options top parameter) `options.top` parameter | 41 | 79 | 36 | 10.1 | 41 | 10.3 |
| Window.scrollTo() scrolls to a particular set of coordinates in the document. | 1 | 12 | 1 | 1 | 18 | 1 |
scrollTo (options behavior parameter) `options.behavior` parameter | 61 | 79 | 36 | 14 | 61 | 14 |
scrollTo (options left parameter) `options.left` parameter | 41 | 79 | 36 | 10.1 | 41 | 10.3 |
scrollTo (options top parameter) `options.top` parameter | 41 | 79 | 36 | 10.1 | 41 | 10.3 |
| The read-only scrollX property of the Window interface returns the number of pixels by which the document is currently scrolled horizontally. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number. You can get the number of pixels the document is scrolled vertically from the Window.scrollY property. | 1 | 12 | 1 | 1 | 18 | 1 |
scrollX (subpixel precision) Subpixel precision | 40 | ≤18 | 55 | | 40 | |
| The read-only scrollY property of the Window interface returns the number of pixels by which the document is currently scrolled vertically. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number. You can get the number of pixels the document is scrolled horizontally from the Window.scrollX property. | 1 | 12 | 1 | 1 | 18 | 1 |
scrollY (subpixel precision) Subpixel precision | 40 | ≤18 | 55 | | 40 | |
- This browser only partially implements this feature
- This feature was removed in a later browser version (21)
- Before Firefox 21, when an element's content does not generate a vertical scrollbar, then its `scrollHeight` property is equal to its `clientHeight` property. This can mean either the content is too short to require a scrollbar or that the element has a CSS style `overflow` value of `visible` (non-scrollable).
- This feature was removed in a later browser version (86)
- For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 41319147.
- This feature was removed in a later browser version (86)
- For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 41319147.
- This feature was removed in a later browser version (86)
- For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 41319147.
- Safari does not have support for the `smooth` scroll behavior.
- Safari on iOS does not have support for the `smooth` scroll behavior.
- Safari does not have support for the `smooth` scroll behavior.
- Safari on iOS does not have support for the `smooth` scroll behavior.
- Before version 15.4, Safari did not have support for the `smooth` scroll behavior.
- Before version 15.4, Safari on iOS did not have support for the `smooth` scroll behavior.
- Previously available under a different name: pageXOffset (1)
- Previously available under a different name: pageXOffset (12)
- Previously available under a different name: pageXOffset (1)
- Previously available under a different name: pageXOffset (1)
- Previously available under a different name: pageXOffset (18)
- Previously available under a different name: pageXOffset (1)
- Previously available under a different name: pageYOffset (1)
- Previously available under a different name: pageYOffset (12)
- Previously available under a different name: pageYOffset (1)
- Previously available under a different name: pageYOffset (1)
- Previously available under a different name: pageYOffset (18)
- Previously available under a different name: pageYOffset (1)
Syntax
addEventListener("scroll", (event) => { })
onscroll = (event) => { }Use cases
-
Using Scroll methods on elements
The scroll event fires when the document view has been scrolled.
Cautions
- May not be supported in older browsers.
Implementation notes
- Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.