JS властивість Element.scrollTop
На даний момент опис відсутній.
- Порада
-
Встановлюйте нове значення властивості
scrollTop, щоб змінити позицію вертикальної прокрутки елемента програмно. Це може бути корисним для реалізації функцій автоматичної прокрутки або анімації прокрутки.
автор: Bondconst element = document.getElementById('myElement'); element.scrollTop = 300; // Прокручує елемент на 300 пікселів вниз - Порада
-
Використовуйте властивість
scrollTopу поєднанні з іншими властивостями, такими якscrollHeight,clientHeightтаoffsetHeight, для реалізації більш складних функцій прокрутки. Наприклад, ви можете прокрутити елемент до його кінця за допомогою такого коду:
автор: Bondconst element = document.getElementById('myElement'); element.scrollTop = element.scrollHeight - element.clientHeight; - Порада
-
Відстежуйте події
scrollабоresizeта використовуйте властивістьscrollTopдля реалізації динамічної поведінки прокрутки. Наприклад, ви можете виконувати певні дії, коли користувач прокручує елемент:
автор: Bondconst element = document.getElementById('myElement'); element.addEventListener('scroll', () => { console.log('Поточна позиція вертикальної прокрутки:', element.scrollTop); // Виконати додаткові дії на основі позиції прокрутки });
Синтаксис
Element.scrollTopПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 8 | 12 | 5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі ми використовуємо властивість scrollTop для вертикального прокручування елемента з великим вмістом. Це може бути корисно для відображення довгих списків або текстових блоків, які не вміщаються на екрані.
HTML
<div id="container" class="scroll-demo">
<div class="scroll-inner">Прокручуваний вміст</div>
</div>
<button id="scrollUpBtn">Прокрутити</button>
<button id="scrollDownBtn">Прокрутити</button>CSS
.scroll-demo {
width: 220px;
height: 110px;
overflow: auto;
border: 1px solid #0172ad;
}
.scroll-inner {
width: 600px;
height: 400px;
background: linear-gradient(135deg, #eef6ff, #0172ad);
padding: 8px;
}JS
const container = document.getElementById('container');
const scrollUpBtn = document.getElementById('scrollUpBtn');
const scrollDownBtn = document.getElementById('scrollDownBtn');
scrollUpBtn.addEventListener('click', () => {
container.scrollTop -= 100; // Прокручуємо вгору на 100 пікселів
});
scrollDownBtn.addEventListener('click', () => {
container.scrollTop += 100; // Прокручуємо вниз на 100 пікселів
});У цьому складнішому прикладі ми створюємо функцію, яка автоматично прокручує елемент до кінця його вмісту. Це може бути корисно для створення анімованого ефекту прокрутки або для реалізації функціональності типу "Автоматична прокрутка новин".
HTML
<div id="container" class="scroll-demo">
<div class="scroll-inner">Прокручуваний вміст</div>
</div>
<button id="startAutoScrollBtn">Старт</button>
<button id="stopAutoScrollBtn">Стоп</button>CSS
.scroll-demo {
width: 220px;
height: 110px;
overflow: auto;
border: 1px solid #0172ad;
}
.scroll-inner {
width: 600px;
height: 400px;
background: linear-gradient(135deg, #eef6ff, #0172ad);
padding: 8px;
}JS
const container = document.getElementById('container');
const startAutoScrollBtn = document.getElementById('startAutoScrollBtn');
const stopAutoScrollBtn = document.getElementById('stopAutoScrollBtn');
let autoScrollInterval;
const autoScroll = () => {
container.scrollTop += 1; // Прокручуємо вниз на 1 піксель
// Перевіряємо, чи ми досягли кінця вмісту
if (container.scrollTop + container.offsetHeight >= container.scrollHeight) {
clearInterval(autoScrollInterval); // Зупиняємо автоматичну прокрутку
}
};
startAutoScrollBtn.addEventListener('click', () => {
autoScrollInterval = setInterval(autoScroll, 20); // Запускаємо автоматичну прокрутку кожні 20 мілісекунд
});
stopAutoScrollBtn.addEventListener('click', () => {
clearInterval(autoScrollInterval); // Зупиняємо автоматичну прокрутку
});У цьому прикладі ми маємо контейнер з довгим вмістом (наприклад, списком або текстом), який не вміщається на екрані. Контейнер має властивість overflow-y: auto, що дозволяє вертикальну прокрутку, коли вміст виходить за межі контейнера.
Користувач може прокручувати вміст вгору або вниз, натискаючи відповідні кнопки.
Коментарі
Коментарів ще немає — будьте першим!