Nos bénévoles n'ont pas encore traduit cet article en Français. Aidez-nous à réaliser cette tâche !
The scroll
event is fired when the document view or an element has been scrolled.
General info
- Specification
- DOM L3, CSSOM View
- Interface
- UIEvent
- Bubbles
- Not on elements, but bubbles to the default view when fired on the document
- Cancelable
- No
- Target
- defaultView, Document, Element
- Default Action
- None
Properties
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not |
cancelable Read only |
Boolean |
Whether the event is cancellable or not? |
view Read only |
WindowProxy |
document.defaultView (window of the document) |
detail Read only |
long (float ) |
0. |
Example
Since scroll
events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent, as follows:
Scroll optimization with window.requestAnimationFrame
// Reference: https://www.html5rocks.com/en/tutorials/speed/animations/ var last_known_scroll_position = 0; var ticking = false; function doSomething(scroll_pos) { // do something with the scroll position } window.addEventListener('scroll', function(e) { last_known_scroll_position = window.scrollY; if (!ticking) { window.requestAnimationFrame(function() { doSomething(last_known_scroll_position); ticking = false; }); } ticking = true; });
More similar examples on resize event.
Browser compatibility
iOS UIWebView
In iOS UIWebViews, scroll
events are not fired while scrolling is taking place; they are only fired after the scrolling has completed. See Bootstrap issue #16202. Safari and WKWebViews are not affected by this bug.