Как сделать, чтобы при прокрутке страницы заполнялся progress сверху?

Question

Как сделать что бы при прокрутке страницы запускалась функция, например, заполнялся <progress> сверху?

Answer 1

Вот пример как это можно реализовать:

const progress = document.querySelector("progress")

const handleScroll = () => {
  const windowScroll = document.body.scrollTop || document.documentElement.scrollTop
  const offsetHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight
  const scrolled = windowScroll / offsetHeight
  progress.value = scrolled
}

window.addEventListener("scroll", handleScroll)

progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: green;
  z-index: 1;
}

.content {
  padding: 20px;
}

<div class="content">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum
  et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have
  scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter
  in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The
  passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used
  in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum
  as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use
  in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</div>
<progress value />

Стоит так же отметить что постоянные "реакции" на событие scroll достаточно затратны, поэтому стоит ограничить частоту вызовов с помощью throttle.

jQuery:

const $progress = $("progress")

const handleScroll = () => {
  const windowScroll = document.body.scrollTop || document.documentElement.scrollTop
  const offsetHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight
  const scrolled = windowScroll / offsetHeight
  $progress.prop("value", scrolled)
}

$(window).on("scroll", handleScroll)

БЛОГ НА HUSL

Как сделать, чтобы при прокрутке страницы заполнялся progress сверху?

Ответы (1 шт):