Индикатор прокрутки страницы

Пример данного индикатора можно увидеть внизу этой страницы или этой (без скроллбара).

HTML:

<div id="scroll-percentage">
	<div class="percentage"></div>
</div>
<div id="percentage-value">0%</div>

</div>

CSS:

#scroll-percentage {
	position: fixed;
	bottom: 0;
	left: 0x;
	width: 100vw;
	color: #000;
	margin: 0;
	padding: 0;
	z-index: 1000;
}
#scroll-percentage .percentage {
	display: inline-block;
	background-color: #BFE2FF;
	border-bottom: 4px solid #337AB7;
	height: 4px;
	width: 0;
	box-sizing: content-box;	
}
#percentage-value {
	box-sizing: content-box;
	position: fixed;
	bottom: 20px;
	left: 20px;
	height: 100px;
	width: 100px;
	color: #337AB7;
	background-color: #BFE2FF;
	text-align: center;
	line-height: 100px;
	border-radius: 50%;
	border: 4px solid #337AB7; 
	font-size: 26px;
	font-weight: bold;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);	
}

#scroll-percentage {

position: fixed;

bottom: 0;

left: 0x;

width: 100vw;

color: #000;

margin: 0;

padding: 0;

z-index: 1000;

}

#scroll-percentage .percentage {

display: inline-block;

background-color: #BFE2FF;

border-bottom: 4px solid #337AB7;

height: 4px;

width: 0;

box-sizing: content-box;

}

#percentage-value {

box-sizing: content-box;

position: fixed;

bottom: 20px;

left: 20px;

height: 100px;

width: 100px;

color: #337AB7;

background-color: #BFE2FF;

text-align: center;

line-height: 100px;

border-radius: 50%;

border: 4px solid #337AB7;

font-size: 26px;

font-weight: bold;

z-index: 1000;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

JavaScript:

const updateScrollPercentage = function() { 
	const heightOfWindow = window.innerHeight,
	contentScrolled = window.pageYOffset,
	bodyHeight = document.body.offsetHeight,
	percentage = document.querySelector(".percentage"),
	percentageVal = document.querySelector("#percentage-value")
	if(bodyHeight - contentScrolled <= heightOfWindow) {
		percentageVal.textContent = percentage.style.width = "100%"
	}
	else {
		const total = bodyHeight - heightOfWindow,
		got = contentScrolled,
		percent = parseInt((got/total) * 100)
		percentageVal.textContent = percentage.style.width = percent + "%"
	}
}
window.addEventListener('scroll', updateScrollPercentage)

const updateScrollPercentage = function() {

const heightOfWindow = window.innerHeight,

contentScrolled = window.pageYOffset,

bodyHeight = document.body.offsetHeight,

percentage = document.querySelector(".percentage"),

percentageVal = document.querySelector("#percentage-value")

if(bodyHeight - contentScrolled <= heightOfWindow) {

percentageVal.textContent = percentage.style.width = "100%"

}

else {

const total = bodyHeight - heightOfWindow,

got = contentScrolled,

percent = parseInt((got/total) * 100)

percentageVal.textContent = percentage.style.width = percent + "%"

}

window.addEventListener('scroll', updateScrollPercentage)

Найдено на codepen.io у пользователя Amadou Oury Diallo

Сергей: 19.10.2021 в 12:40

На телефоне доходит только до 99% максимум. А на компе все нормально

Ответить
Миша: 18.09.2021 в 12:30

Спасибо большое, очень классный индикатор! 😀

Ответить
Сергей: 05.12.2020 в 11:32

на какие версии js это скрипты ) просто некоторые у меня не работают на сайте локальном

Ответить
- Alexander: 06.12.2020 в 09:42
  
  Версии чего? 🙂
  У JS нет версий, у jQuery есть, но данный код без этой библиотеки.
  
  Ответить
Дмитрий: 14.05.2020 в 18:54

Благодарю за этот крутой индикатор прокрутки страницы. Полезная вещь, добавил на сайт.

Ответить
nexta: 03.04.2020 в 11:03

Классный индикатор 😉

Ответить

HTML:

CSS:

JavaScript:

Смотрите также:

Добавить комментарий:

Комментарии: