Прокрутка Progress Bar - PullRequest
Новая
       22

Прокрутка Progress Bar

0 голосов
/ 14 мая 2018

Я пытаюсь реализовать индикатор выполнения, показывающий, насколько близко вы находитесь к концу страницы в ванильном JavaScript. Однако я столкнулся с несколькими проблемами.

Прежде всего, хотя элемент body прокручивается, document.body.scrollTop всегда возвращает 0.Я разобрался с этим с помощью document.scrollingElement.scrollTop.

. Прошло много времени с тех пор, как я в последний раз реализовал подобную функцию, поэтому я перешел к Stack Overflow и нашел этот поток , который пробежалнемного памятиИз того, что я помню в прошлый раз, когда я реализовал эту функцию, формула должна выглядеть примерно так, как было упомянуто в этой теме: 

const progressBar = document.getElementById('footer__progress_bar')
const totalValue = document.body.scrollHeight - window.innerHeight

document.body.onscroll = () => {
  let currentValue = document.scrollingElement.scrollTop
  let offset = (currentValue / totalValue) * 100 - 100 + '%'
  progressBar.style.left = offset
}

К сожалению, что-то не так с приведенным выше сценарием, и я могу 'Кажется, я не понимаю, что это такое.По какой-то причине значение offset превышает (а иногда и не достигает) отметку.Я создал CODEPEN , и проблема с перерегулированием сохраняется, поэтому кажется, что проблема заключается в самой формуле.Тем не менее, когда я смотрю на числа (window.innerHeight, body.scrollTop и т. Д.), Ни одно из них, похоже, не складывается.Ниже приведены цифры. 

window.innerHeight ..................... 779
document.body.clientHeight ............ 3210
document.body.offsetHeight ............ 3212
document.body.scrollTop .................. 0
document.scrollingElement.scrollTop ... 2646

Я также заметил супер странное поведение.document.body.clientHeight и document.body.offsetHeight будут случайным образом изменять значения, когда я обновляю страницу, так что они почти постоянно скачут назад и вперед с X to Y.

Примечательно, что сам элемент body имеет heightauto и без вертикальных полей, хотя некоторые из его детей имеют вертикальные поля.Элемент main, куда я встраиваю все из базы данных, также имеет height: auto, но он также возвращает 0, когда я проверяю его scrollTop.

Кто-нибудьесть идеи, где я иду не так или почему цифры не складываются?

Ответы [ 2 ]

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

Вы можете использовать плагин PrognRoll jQuery:

Примеры

Демонстрация тела на CodePen 

<body>
<!-- Content -->
</body>

Отображение индикатора прогресса прокрутки: 

$(function() {
  $("body").prognroll();
});

или создайте индикатор прокрутки с помощью CSS и JavaScript (без плагина).

Смотрите живой пример ниже: 

window.onscroll = function() {
  ScrollIndicator()
};

function ScrollIndicator() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("headerBar").style.width = scrolled + "%";
  console.log(Math.round(scrolled * 100) / 100);
  document.getElementById("footerBar").style.width = scrolled + "%";
  document.getElementById("footerBar").innerHTML = Math.round(scrolled) + "%";
}
body {
  height: 2000px;
  text-align: center;
  font-family: arial;
  color: #333;
  margin: 0px;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.header h2 {
  text-align: center;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  width: 0%;
}

.content {
  padding: 50px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}

footer {
  width: 100vw;
  height: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ccc;
}

.footer-progress-bar {
  height: 20px;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  width: 0%;
  text-align: center
}
<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="headerBar"></div>
  </div>
</div>

<div class="content">
  <h2>Scroll down to see how it works</h2>
</div>

<footer>
  <div class="footer-progress-bar" id="footerBar">0%</div>
</footer>
0 голосов
/ 14 мая 2018

Пожалуйста, смотрите изменения, которые я применил к вашему CODEPEN 

body {
	height: 300vh;
	background: black
}

footer {
	width: 100vw;
	height: 20px;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #fff
}

#footer__progress_bar {
	height: 20px;
	background: blue;
	width: 0%;
  text-align: center
}
<footer>
	<div id="footer__progress_bar">0%</div>
</footer>

<script>
window.onscroll = function() { ScrollIndicator() };

function ScrollIndicator() {
	var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	var scrolled = (winScroll / height) * 100;
	document.getElementById( 'footer__progress_bar' ).style.width = scrolled + "%";
	document.getElementById( 'footer__progress_bar' ).innerHTML = Math.round( scrolled ) + "%"
}
</script>
...