Индикатор прокрутки - PullRequest
Новая
       6

Индикатор прокрутки

0 голосов
/ 24 июня 2018

Этот код делает этим индикатором прокрутки.

Не могли бы вы помочь мне выяснить, как здесь вычисляется переменная scrolled?

Пожалуйста, объясните, почему clientHeight вычитается из scrollHeight, а переменная winScroll делится на height, затем умножается на 100? 

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {
  myFunction()
};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>

<div class="content">
  <h3>Scroll Down to See The Effect</h3>
  <p>100 text line</p>
</div>

1 Ответ

0 голосов
/ 24 июня 2018

clientHeight возвращает высоту окружающего div. clientHeight reference

Свойство scrollHeight только для чтения - это измерение высоты содержимого элемента, включая содержимое, не видимое на экране из-за переполнения. scrollHeight reference

Значение scrollTop элемента - это измерение расстояния от вершины элемента до его самого видимого содержимого. ссылка scrollTop

Вычитание формы clientHeight scrollHeight дает максимальное значение scrollTop, которое можно получить. Когда прокрутка достигает нижней части страницы, значение scrollTop становится равным значению height.

Деление с height и умножение на 100 - получить процент прокрутки.

...