css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

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

Порада:

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

const element = document.getElementById('myElement');
element.scrollTop = element.scrollHeight - element.clientHeight;
Порада:

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

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

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

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

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

Синтаксис

Element.scrollTop

Значення

Return

Переглядачі

Переглядач

1

1

1

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


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

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

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

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

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

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

Документи

Зв'язок