GlobalEventHandlers.onscroll

The onscroll property of the GlobalEventHandlers mixin is an EventHandler that processes scroll events.

The scroll event fires when the user scrolls an item's contents.

Syntax

target.onscroll = functionRef;

Value

functionRef is a function name or a function expression. The function receives a UIEvent object as its sole argument.

Only one onscroll handler can be assigned to an object at a time. For greater flexibility, you can pass a scroll event to the EventTarget.addEventListener() method instead.

Example

This example monitors scrolling on a <textarea>, and logs the element's vertical scroll position accordingly.

HTML

<textarea>1 2 3 4 5 6 7 8 9</textarea>
<p id="log"></p>

CSS

textarea {
  width: 4rem;
  height: 8rem;
  font-size: 3rem;
}

JavaScript

const textarea = document.querySelector('textarea');
const log = document.getElementById('log');

textarea.onscroll = logScroll;

function logScroll(e) {
  log.textContent = `Scroll position: ${e.target.scrollTop}`;
}

Result

Specifications

Browser compatibility

See also

• Document: scroll event
• Element: scroll event