В этом руководстве вы узнаете, как прокручивать элементы до определенной позиции, используя метод scrollIntoView() в JavaScript.
Предположим, у вас есть список элементов, и вы хотите, чтобы определенный элемент был выделен и прокручен.
Для этого можно использовать метод element.scrollIntoView(), который принимает логическое значение или объект:
element.scrollIntoView(alignToTop);
или же
element.scrollIntoView(options);
Метод scrollIntoView() принимает один из двух следующих аргументов.
alignToTop
alignToTop — это логическое значение.
Если установлено значение true, метод выровняет верхнюю часть элемента по верхней части области просмотра или верхней части видимой области прокручиваемого предшественника.
Если для alignToTop установлено значение false, метод выровняет нижнюю часть элемента по нижней части области просмотра или нижней части видимой области прокручиваемого предшественника.
По умолчанию alignToTop равно true.
options
options — это объект, который дает больший контроль над выравниванием элемента в представлении. Однако поддержка веб-браузера может немного отличаться.
Объект options имеет следующие свойства:
behaviorопределяет анимацию перехода. Свойствоbehaviorпринимает два значения:autoилиsmooth. По умолчаниюauto.blockопределяет вертикальное выравнивание. Он принимает одно из четырех значений:start,center,endилиnearest. По умолчанию этоstart.inlineопределяет выравнивание по горизонтали. Он также принимает одно из четырех значений:start,center,endилиnearest. По умолчанию этоnearest.
Пример scrollIntoView()
Предположим, что у вас есть HTML-страница со списком языков программирования:
<!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>
Без прокрутки элемент списка JavaScript, который имеет класс с именем special, не находится в области просмотра. При нажатии кнопки "Scroll Into View" элемент списка JavaScript прокручивается в представление:
let btn = document.querySelector('.btn');
let el = document.querySelector('.special');
btn.addEventListener('click', function() {
el.scrollIntoView(true);
});
Как это работает:
- Сначала выберите кнопку с классом
btnи элемент списка сspecial. - Затем прикрепите прослушиватель событий к событию нажатия кнопки.
- Наконец, прокрутите элемент списка
JavaScriptв область просмотра, вызвав методel.scrollIntoView(true)в обработчике события клика.
Вот демонстрация JavaScript scrollIntoView().
Чтобы выровнять элемент списка JavaScript по нижней части представления, вы передаете значение false = методу scrollIntoView() :
let btn = document.querySelector('.btn');
let el = document.querySelector('.special');
btn.addEventListener('click', function() {
el.scrollIntoView(false);
});