Element.scrollIntoView()

Experimental: Esta é uma tecnologia experimental (en-US)
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

BCD tables only load in the browser

Veja também