ZorNet.Ru — сайт для вебмастера » HTML и CSS » Индикатор прокрутки страницы на CSS

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

Отличное решение для сайта, виде индикатора, который автоматически станет показывать глубину прокрутки, а также линий с выводом на проценты. Думаю со мной многие согласятся, что индикатор устанавливают на страницах, где много материала. Чтоб просто увидеть значение и не сбиться, когда вы откроете следующий раз аналогичную страницу. Также считаю его как элемент дизайна, который красиво оформлен, где под него идет стилистика CSS, что можно самостоятельно выстроить как линию, так и счетчик, где показывает значение в процентном соотношении.

Но соглашусь, где все смотрится оригинально, если создавая новую страницу, то на ее можно поставить индикатор, который отлично дополняет основу дизайна, и постоянно работает, если вы прокручиваете страницу в любом направление, это вниз или вверх. Сама установка индикатора прокрутки страницы с помощью CSS3 не так сложная, здесь главное определиться по факту, для чего она будет стоять на сайте.

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

1. Вот пример установки на блоге или сайте, где линия находится внизу, а сам счетчик идет по левую сторону в нижнем углу, где изначально при прокрутке появляется линия.

Полоса прокрутки или же индикатор прокрутки

Установочный процесс:

HTML

Код

CSS

Код

#kovemand-pegiences {
  position: fixed;
  bottom: 0;
  left: 0x;
  width: 100vw;
  color: #161617;
  margin: 0;
  padding: 0;
  z-index: 1000;
}
#kovemand-pegiences .uelsnamescaneg {
  display: inline-block;
  background-color: #e9ebec;
  border-bottom: 3px solid #4a94d4;
  height: 3px;
  width: 0;
  box-sizing: content-box;
}
#budgeco-nsolequels {
  box-sizing: content-box;
  position: fixed;
  bottom: 18px;
  left: 18px;
  height: 100px;
  width: 100px;
  color: #3d709c;
  background-color: #d1e0ec;
  text-align: center;
  line-height: 100px;
  border-radius: 100%;
  border: 3px solid #478fce;
  font-size: 30px;
  font-weight: bold;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(90, 87, 87, 0.2), 0 16px 20px rgba(68, 66, 66, 0.2);
}

Код

const updateScrollPercentage = function() {
  const heightOfWindow = window.innerHeight,
  contentScrolled = window.pageYOffset,
  bodyHeight = document.body.offsetHeight,
  percentage = document.querySelector(".uelsnamescaneg"),
  percentageVal = document.querySelector("#budgeco-nsolequels")
  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)

Ниже по ссылки идет ссылка на демонстрацию, где создана страница, как пример вы можете посмотреть как такая прокрутка вписывается в отдельный дизайн интернет ресурса, где безусловно оформление одно из первых, на что нужно обратить внимание.

Она по умолчанию представлена по высоте и ширине, где не забываем, что можно все сделать намного менее и будет на так заметна, но если не мешает, то точно странице, как и стилистике будет как дополнение.

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

15 Июня 2019 Загрузок: 2 Просмотров: 1243 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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