YouTip`, ``, ``, ` `, ` `, ` `, ` `, ``, `
- `, `
Event Onscroll
## JavaScript `onscroll` Event
The `onscroll` event occurs when an element's scrollbar is being scrolled. This event can be triggered by scrolling with a mouse wheel, dragging a scrollbar, using keyboard arrow keys, or via programmatic scrolling (e.g., setting `scrollTop` or `scrollLeft`).
To make an element scrollable and trigger this event, you must use the CSS `overflow` property (such as `overflow: auto` or `overflow: scroll`) to create scrollbars when the content exceeds the element's dimensions.
---
## Syntax and Usage
You can register a scroll event handler in three ways:
### 1. In HTML (Inline Attribute)
```html
```
### 2. In JavaScript (DOM Property)
```javascript
object.onscroll = function() {
myScript();
};
```
### 3. In JavaScript (Event Listener)
```javascript
object.addEventListener("scroll", myScript);
```
> **Note:** The `addEventListener()` method is the modern standard and is recommended for most production applications. Legacy browsers like Internet Explorer 8 and earlier do not support `addEventListener()`.
---
## Technical Details
| Property | Description |
| :--- | :--- |
| **Bubbles** | Yes (Note: The `scroll` event on the `Document` object bubbles up to the `Window` object, but element-level scroll events do not bubble up the DOM tree). |
| **Cancelable** | No (You cannot prevent scrolling using `event.preventDefault()`). |
| **Event Type** | `UIEvent` / `Event` |
| **Supported HTML Tags** | ``, `