GlobalEventHandlers.onscroll

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

A propriedade onscroll do GlobalEventHandlers é uma mistura de eventos event handler que processam eventos scroll.

O evento scroll é disparado quando uma visão do documento ou um elemento foi rolado, seja por um usuário, uma API Web, ou o user agent.

Nota: Não confunda onscroll com onwheel: onwheel manipula a rotação da roda do mouse, enquanto onscroll manipula rolagem do conteúdo do objeto.

Sintaxe

target.onscroll = functionRef;

Valor

functionRef é o nome de uma função ou uma expressão de função. A função recebe um UIEvent objeto com um único argumento.

Apenas um manipulador onscroll pode ser associado à um objeto por vez. Para uma maior flexibilidade, você pode passar um scroll evento para o EventTarget.addEventListener() metódo ao invés disso.

Exemplo

Este exemplo monitora rolagens sobre o elemento <textarea>, e registra a posição vertical adequadamente.

HTML

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

CSS

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

JavaScript

js
const textarea = document.querySelector("textarea");
const log = document.getElementById("log");

textarea.onscroll = logScroll;

function logScroll(e) {
  log.textContent = `Posição do scroll: ${e.target.scrollTop}`;
}

Resultado

Especificações

Specification
CSSOM View Module
# eventdef-document-scroll
HTML
# handler-onscroll

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também