Element.scrollIntoView()

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

O método Element.scrollIntoView() move o elemento ao qual é aplicado para a área visível da janela do navegador.

Sintaxe

element.scrollIntoView(); // Equivalente a element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Argumentos booleanos
element.scrollIntoView(scrollIntoViewOptions); // argumento Objeto

Parâmetros

alignToTop Optional
É um valor Boolean:
  • Se true, a parte superior do elemento ficará alinhada com o topo da área visível do elemento-pai. Correponde a scrollIntoViewOptions: {block: "start", inline: "nearest"}. Este é o valor default.
  • Se false, a parte inferior do elemento ficará alinhada com o fundo da área visível do elemento-pai. Corresponde a scrollIntoViewOptions: {block: "end", inline: "nearest"}
scrollIntoViewOptions Optional
Um booleano ou um objeto com as seguintes opções:
{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "center" | "end" | "nearest",
  inline:   "start" | "center" | "end" | "nearest"
}
Caso seja um valor booleano, true corresponde a {block: "start"} e false a {block: "end"}.

Exemplo

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({block: "end", behavior: "smooth"});

Observações

O elemento poderá não ser movido completamento ao topo ou ao fundo dependendo de sua composição com outros elementos.

Especificações

Especificação Status Comentário
CSS Object Model (CSSOM) View Module
The definition of 'Element.scrollIntoView()' in that specification.
Rascunho atual Definição inicial

Compatibilidade com navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scrollIntoView
Experimental
Chrome Full support 29Edge Full support 17
Notes
Full support 17
Notes
Notes The only parameter supported is alignToTop.
No support 12 — 17
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Notes No support for smooth behavior.
Firefox Full support 1IE Full support 8
Notes
Full support 8
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Notes No support for smooth behavior or center options.
Opera Full support 38Safari Full support 6
Notes
Full support 6
Notes
Notes No support for smooth behavior or center options.
WebView Android Full support ≤37Chrome Android Full support 29Firefox Android Full support 4Opera Android Full support 41Safari iOS Full support 5
Notes
Full support 5
Notes
Notes No support for smooth behavior or center options.
Samsung Internet Android Full support 2.0
scrollIntoViewOptions
Experimental
Chrome Full support 61
Notes
Full support 61
Notes
Notes The block and inline options support the values start, center, end, nearest.
Edge Full support 79
Notes
Full support 79
Notes
Notes The block and inline options support the values start, center, end, nearest.
Firefox Full support 36
Notes
Full support 36
Notes
Notes No support for inline option.
Notes Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
IE No support NoOpera Full support 48
Notes
Full support 48
Notes
Notes The block and inline options support the values start, center, end, nearest.
Safari No support NoWebView Android Full support 61
Notes
Full support 61
Notes
Notes The block and inline options support the values start, center, end, nearest.
Chrome Android Full support 61
Notes
Full support 61
Notes
Notes The block and inline options support the values start, center, end, nearest.
Firefox Android Full support 36
Notes
Full support 36
Notes
Notes No support for inline option.
Notes Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
Opera Android Full support 45
Notes
Full support 45
Notes
Notes The block and inline options support the values start, center, end, nearest.
Safari iOS No support NoSamsung Internet Android Full support 8.0
Notes
Full support 8.0
Notes
Notes The block and inline options support the values start, center, end, nearest.

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

Veja também