Resumo : neste tutorial, você aprenderá como rolar um elemento na visualização usando seu scrollIntoView()
método.
Suponha que você tenha uma lista de elementos e queira que um elemento específico seja destacado e exibido.
Para conseguir isso, você pode usar o element.scrollIntoView()
método. O element.scrollIntoView()
aceita um valor booleano ou um objeto:
element.scrollIntoView(alignToTop);
Linguagem de código: JavaScript ( javascript )
ou
element.scrollIntoView(options);
Linguagem de código: CSS ( css )
O método aceita um dos dois argumentos a seguir:
alignToTop
O alignToTop
é um valor booleano.
Se estiver definido como true
, o método alinhará a parte superior do elemento com a parte superior da janela de visualização ou com a parte superior da área visível do ancestral rolável.
Se alignToTop
estiver definido como false
, o método alinhará a parte inferior do elemento com a parte inferior da janela de visualização ou com a parte inferior da área visível do ancestral rolável.
Por padrão, o alignToTop
é true
.
options
O options
argumento é um objeto que dá mais controle sobre o alinhamento do elemento na visualização. No entanto, o suporte do navegador da web pode ser um pouco diferente.
O options
objeto possui as seguintes propriedades:
behavior
propriedade define a animação de transição. Abehavior
propriedade aceita dois valores:auto
ousmooth
. O padrão éauto
.block
propriedade define o alinhamento vertical. Ele aceita um dos quatro valores:start
,center
,end
ounearest
. Por padrão, éstart
.inline
propriedade define o alinhamento horizontal. Ele também aceita um dos quatro valores:start
,center
,end
ounearest
. O padrão énearest
.
Exemplo de scrollIntoView() de JavaScript
Suponha que você tenha uma página HTML com uma lista de linguagens de programação como segue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS scrollIntoView Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button class="btn">Scroll Into View</button>
<ul>
<li>C</li>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>C#</li>
<li>Go</li>
<li>Visual Basic</li>
<li>JavaScript</li>
<li>PHP</li>
<li>SQL</li>
<li>R</li>
<li>Swift</li>
<li class="special">JavaScript</li>
<li>MATLAB</li>
<li>Assembly language</li>
<li>Ruby</li>
<li>PL/SQL</li>
<li>Classic Visual Basic</li>
<li>Perl</li>
<li>Scratch</li>
<li>Objective-C</li>
</ul>
</div>
<script src="scrollIntoView.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Sem rolagem, o JavaScript
item da lista, que possui uma classe chamada special
, não estará na janela de visualização. Quando o botão "Scroll Into View"
é clicado, o JavaScript
item da lista é rolado para a visualização:
let btn = document.querySelector('.btn');
let el = document.querySelector('.special');
btn.addEventListener('click', function () {
el.scrollIntoView(true);
});
Linguagem de código: JavaScript ( javascript )
Como funciona:
- Primeiro, selecione o botão com a
btn
turma e liste os itens com aspecial
turma. - Em seguida, anexe um ouvinte de evento ao evento click do botão.
- Por fim, role o
JavaScript
item da lista até a janela de visualização chamando oel.scrollIntoView(true)
método no manipulador de eventos click.
Aqui está a demonstração JavaScript scrollIntoView().
Para alinhar o JavaScript
item da lista à parte inferior da visualização, você passa false
o valor para o scrollIntoView()
método:
let btn = document.querySelector('.btn');
let el = document.querySelector('.special');
btn.addEventListener('click', function() {
el.scrollIntoView(false);
});
Linguagem de código: JavaScript ( javascript )
Neste tutorial, você aprendeu como usar o scrollIntoView()
método JavaScript para rolar um elemento na janela de visualização.