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

Вот такой оригинальный скроллинг страницы.
Это сам код. Расписывать в подробностях не буду. Разберём ниже, как его оформить под персональный дизайн.
<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>
<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, тоже лучше в конце макета блога.
Вот и всё. Всем добра и до встречи.
здесь можно оформить подписку на новые шпаргалки
Прикольно! Возьму себе в БАД Прямо под мой блог сделано!! Спасибо,Вика!
ОтветитьУдалитьИрина, вроде ты процентный ставила. Но коль этот нравится - бери. Можно с радиусом поиграться если есть желание.
УдалитьДействительно, прикольно. Но, по-моему, некоторое излишество. Впрочем, почему нет?
ОтветитьУдалитьСемён, всяко бывает. Иногда даже простая фишка на блоге привлекает больше внимания.
УдалитьИнтересная фишка. Спасибо, Вика!
ОтветитьУдалитьНет, это на библиомир83 меняла твой же, но без %. Этот - прекрасно стал- всё работает, НО.... к сожалению закрывает нижнюю панель перехода на др блоги. А так все классно! Если бы он был полностью в левой стороне блога и вертикально, а кругляшок с % внизу полосы загрузки - для меня было бы идеально. А так пришлось с сожалением убрать. Попробовала поиграться для левой ст. , но ничего не получилось.
ОтветитьУдалитьИрина, не совсем всё поняла. Ну ладно.Тут играться нужно со значениями box-sizing: content-box;
Удалитьposition: fixed;
bottom: 20px;
left: 20px;