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 alignToTopestiver 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 optionsargumento é 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 optionsobjeto possui as seguintes propriedades:
behaviorpropriedade define a animação de transição. Abehaviorpropriedade aceita dois valores:autoousmooth. O padrão éauto.blockpropriedade define o alinhamento vertical. Ele aceita um dos quatro valores:start,center,endounearest. Por padrão, éstart.inlinepropriedade define o alinhamento horizontal. Ele também aceita um dos quatro valores:start,center,endounearest. 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 JavaScriptitem 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 JavaScriptitem 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
btnturma e liste os itens com aspecialturma. - Em seguida, anexe um ouvinte de evento ao evento click do botão.
- Por fim, role o
JavaScriptitem 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 JavaScriptitem da lista à parte inferior da visualização, você passa falseo 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.
