Вопрос задан 05.07.2023 в 05:10. Предмет Информатика. Спрашивает Журавлева Мария.

JavaScript. Как сделать, чтобы при прокрутке страницы запускалась функция? Например, по мере

прокрутки страницы, заполнялся тэг progress сверху?

Перейти к ответам

Отвечу на вопрос мгновенно! Нейросеть ChatGPT. Жми!

Ответы на вопрос

Внимание! Ответы на вопросы дают живые люди. Они могут содержать ошибочную информацию, заблуждения, а также ответы могут быть сгенерированы нейросетями. Будьте внимательны. Если вы уверены, что ответ неверный, нажмите кнопку "Пожаловаться" под ответом.

Отвечает Власенко Александр.

Ответ:

Для отлавливания момента прокрутки можно использовать событие scroll.

Пример:

window.addEventListener("scroll", function () {

document.getElementById("someBlock").innerText = window.scrollY + "px";

});

Записывает в блок с id someBlock значение текущей прокрутки.

А вот с тегом progress все сложнее. Там надо знать всю высоту страницы, а это может быть проблематично.

Есть такой вариант:

let scrollHeight = Math.max(

document.body.scrollHeight, document.documentElement.scrollHeight,

document.body.offsetHeight, document.documentElement.offsetHeight,

document.body.clientHeight, document.documentElement.clientHeight

);

Но и он может некорректно работать в зависимости от разметки.

После получения полной высоты страницы ее надо записать в атрибут max в прогрессбар, а по мере изменения прокрутки (событие scroll) изменять значение атрибута value.

Установка атрибутов производится так:

element.setAttribute(name, value);

element - элемент, которому необходимо установить атрибут

name - имя атрибута (строка).

value - значение атрибута.

============

Не забывайте нажать "Спасибо", поставить оценку и, если ответ удовлетворил, то выберите его как "Лучший"

Бодрого настроения и добра!

Успехов в учебе

Отвечает нейросеть ChatGpt. Будьте внимательны, ответы нейросети могут содержать ошибочные или выдуманные данные.

Для того чтобы запустить функцию при прокрутке страницы и обновлять элемент <progress> сверху, вам потребуется использовать события прокрутки (scroll) и рассчитывать прогресс в зависимости от положения прокрутки относительно высоты страницы. Вот пример того, как это можно сделать на JavaScript:

HTML:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Progress</title>
</head>
<body>
  <progress id="scrollProgress" value="0" max="100"></progress>

  <div style="height: 200vh;">
    <!-- Для тестирования, чтобы страница имела высоту, достаточную для прокрутки -->
  </div>

  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

javascript
// Функция, которая будет вызываться при прокрутке страницы
function updateScrollProgress() {
  const scrollProgress = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
  document.getElementById("scrollProgress").value = scrollProgress;
}

// Добавляем событие прокрутки, которое будет вызывать функцию updateScrollProgress
window.addEventListener("scroll", updateScrollProgress);

В этом примере при прокрутке страницы вызывается функция updateScrollProgress, которая рассчитывает прогресс на основе текущего положения прокрутки относительно общей высоты страницы. Этот прогресс затем используется для обновления элемента <progress>.

Не забудьте добавить этот код в файл script.js, который подключен в HTML. Вы также можете настроить стили и значения атрибутов <progress> согласно своим потребностям.

Спроси у Chat GPT бесплатно без регистрации!