оригинальный индикатор прокрутки

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

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


Вот такой оригинальный скроллинг страницы.

Это сам код. Расписывать в подробностях не буду. Разберём ниже, как его оформить под персональный дизайн.

<div id="scroll-percentage">
    <div class="percentage"></div>
</div>
<div id="percentage-value"></div>
<script type="text/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)</script>

<style>#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: #004D40; /* цвет нижней полосы */
    border-bottom: 5px solid #F4FF81;  /*цвет рамки полосы */
    height: 4px;  /* ширина полосы */
    width: 0;
    box-sizing: content-box; 
}
#percentage-value {
    box-sizing: content-box;
    position: fixed;
    bottom: 20px;
    left: 20px;
    height: 80px;  /*размер круга можно уменьшить/увеличить */
    width: 80px; /*размер круга можно уменьшить/увеличить */
    color: #FFFFFF; /*цвет цифр  */
    background-color: #004D40; /*фон круга */
    text-align: center;
    line-height: 80px; /*регулировать при изменении размера круга */
    border-radius: 50%;
    border: 5px solid #F4FF81; /*цет рамки круга */
    font-size: 24px; /*размер шрифта цифр */
    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); /*размер и цвет тени круга */
} </style>


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

Вот и всё. Всем добра и до встречи.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


7 комментариев:

  1. Прикольно! Возьму себе в БАД Прямо под мой блог сделано!! Спасибо,Вика!

    ОтветитьУдалить
    Ответы
    1. Ирина, вроде ты процентный ставила. Но коль этот нравится - бери. Можно с радиусом поиграться если есть желание.

      Удалить
  2. Действительно, прикольно. Но, по-моему, некоторое излишество. Впрочем, почему нет?

    ОтветитьУдалить
    Ответы
    1. Семён, всяко бывает. Иногда даже простая фишка на блоге привлекает больше внимания.

      Удалить
  3. Интересная фишка. Спасибо, Вика!

    ОтветитьУдалить
  4. Нет, это на библиомир83 меняла твой же, но без %. Этот - прекрасно стал- всё работает, НО.... к сожалению закрывает нижнюю панель перехода на др блоги. А так все классно! Если бы он был полностью в левой стороне блога и вертикально, а кругляшок с % внизу полосы загрузки - для меня было бы идеально. А так пришлось с сожалением убрать. Попробовала поиграться для левой ст. , но ничего не получилось.

    ОтветитьУдалить
    Ответы
    1. Ирина, не совсем всё поняла. Ну ладно.Тут играться нужно со значениями box-sizing: content-box;
      position: fixed;
      bottom: 20px;
      left: 20px;

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск