GlobalEventHandlers.onscroll

Você está lendo a versão em inglês deste conteúdo porque ainda não há uma tradução para este idioma. Ajude-nos a traduzir este artigo!

A propriedade onscroll do GlobalEventHandlers é uma mistura de eventos EventHandler 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

<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}`;
}

Resultado

Especificações

Especificação Status Comentário
HTML Living Standard
The definition of 'onscroll' in that specification.
Padrão em tempo real
Document Object Model (DOM) Level 3 Events Specification
The definition of 'onscroll' in that specification.
Obsoleto Initial definition

Compatibilidade com o Navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
onscrollChrome Full support YesEdge Full support YesFirefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Veja também