JS властивість Element.scrollTop

На даний момент опис відсутній.

Порада

Встановлюйте нове значення властивості scrollTop, щоб змінити позицію вертикальної прокрутки елемента програмно. Це може бути корисним для реалізації функцій автоматичної прокрутки або анімації прокрутки.

const element = document.getElementById('myElement');
element.scrollTop = 300; // Прокручує елемент на 300 пікселів вниз

автор: Bond

Порада

Використовуйте властивість scrollTop у поєднанні з іншими властивостями, такими як scrollHeight, clientHeight та offsetHeight, для реалізації більш складних функцій прокрутки. Наприклад, ви можете прокрутити елемент до його кінця за допомогою такого коду:

const element = document.getElementById('myElement');
element.scrollTop = element.scrollHeight - element.clientHeight;

автор: Bond

Порада

Відстежуйте події scroll або resize та використовуйте властивість scrollTop для реалізації динамічної поведінки прокрутки. Наприклад, ви можете виконувати певні дії, коли користувач прокручує елемент:

const element = document.getElementById('myElement');

element.addEventListener('scroll', () => {
  console.log('Поточна позиція вертикальної прокрутки:', element.scrollTop);
  // Виконати додаткові дії на основі позиції прокрутки
});

автор: Bond

Синтаксис

Element.scrollTop

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1	1	1	8	12

Підтримка: мобільні переглядачі
Переглядач
	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;
}

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 пікселів
});

автор: Bond

У цьому складнішому прикладі ми створюємо функцію, яка автоматично прокручує елемент до кінця його вмісту. Це може бути корисно для створення анімованого ефекту прокрутки або для реалізації функціональності типу "Автоматична прокрутка новин".

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;
}

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); // Зупиняємо автоматичну прокрутку
});

автор: Bond

У цьому прикладі ми маємо контейнер з довгим вмістом (наприклад, списком або текстом), який не вміщається на екрані. Контейнер має властивість overflow-y: auto, що дозволяє вертикальну прокрутку, коли вміст виходить за межі контейнера.

Користувач може прокручувати вміст вгору або вниз, натискаючи відповідні кнопки.

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!