03.04.2020, 12:49
|
|
Аспирант
|
|
Регистрация: 30.08.2019
Сообщений: 52
|
|
|
Круговой индикатор скролла страницы
Привет всем! Помогите переделать линейный индикатор в круговой:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0px;
left: 0px;
}
.progress-bar {
height: 8px;
background: #216558;
width: 0%;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
типо контент<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pri quas audiam virtute ut, case utamur fuisset eam ut, iisque accommodare an eam. Reque blandit qui eu, cu vix nonumy volumus. Legendos intellegam id usu, vide oporteat vix eu, id illud principes has. Nam tempor utamur gubergren no.
Ex soleat habemus usu, te nec eligendi deserunt vituperata. Natum consulatu vel ea, duo cetero repudiare efficiendi cu. Has at quas nonumy facilisis, enim percipitur mei ad. Mazim possim adipisci sea ei, omnium aeterno platonem mei no.
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
</body>
</html>
P.S.Тут чего-то не работает полоса прокрутки
Последний раз редактировалось MOT, 03.04.2020 в 13:23.
|
|
03.04.2020, 13:15
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от MOT
|
|
Тут чего-то не работает полоса прокрутки
|
<!DOCTYPE html> хотя бы добавьте |
|
05.04.2020, 12:10
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,700
|
|
А где ты индикатор размещать хочешь?
Можно с помощью svg сделать
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
svg {
position: fixed;
left: 0px
top: 0px;
}
.progress-container {
stroke-width: 8px;
fill: transparent;
cx: 75px;
cy: 75px;
r: 70px;
stroke: #ccc;
}
.progress-bar {
stroke-width: 8px;
fill: transparent;
cx: 75px;
cy: 75px;
r: 70px;
stroke: #216558;
stroke-dasharray : 0 472;
}
</style>
</head>
<body>
<svg viewBox="0 0 150 150" width=150 height=150>
<circle class="progress-container" ></circle>
<circle id='myBar'class="progress-bar" transform='rotate(-90, 75, 75)'></circle>
</svg>
типо контент<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pri quas audiam virtute ut, case utamur fuisset eam ut, iisque accommodare an eam. Reque blandit qui eu, cu vix nonumy volumus. Legendos intellegam id usu, vide oporteat vix eu, id illud principes has. Nam tempor utamur gubergren no.
Ex soleat habemus usu, te nec eligendi deserunt vituperata. Natum consulatu vel ea, duo cetero repudiare efficiendi cu. Has at quas nonumy facilisis, enim percipitur mei ad. Mazim possim adipisci sea ei, omnium aeterno platonem mei no.
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pri quas audiam virtute ut, case utamur fuisset eam ut, iisque accommodare an eam. Reque blandit qui eu, cu vix nonumy volumus. Legendos intellegam id usu, vide oporteat vix eu, id illud principes has. Nam tempor utamur gubergren no.
Ex soleat habemus usu, te nec eligendi deserunt vituperata. Natum consulatu vel ea, duo cetero repudiare efficiendi cu. Has at quas nonumy facilisis, enim percipitur mei ad. Mazim possim adipisci sea ei, omnium aeterno platonem mei no.
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height);
var lc = 140*Math.PI;
var lscr = lc * scrolled + 0.5 | 0;
var lns = lc-lscr + 0.5 | 0
document.getElementById("myBar").style.strokeDasharray = lscr + ', ' + lns;
}
</script>
</body>
</html>
Последний раз редактировалось voraa, 05.04.2020 в 18:41.
|
|
05.04.2020, 13:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
voraa,
строка 65 может Math.round ?
|
|
05.04.2020, 13:29
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,700
|
|
Сообщение от рони
|
voraa,
строка 65 может Math.round ?
|
var lns = (lc-lscr+0.5) | 0;
 |
|
05.04.2020, 14:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
круг всё равно не замкнулся, может всё таки Math.round?  |
|
05.04.2020, 15:23
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,700
|
|
Не. Из принципа
В Хроме все ОК,
Файрфокс чудит
Вот так вроде нормально
var lscr = lc * scrolled + 0.5 | 0;
var lns = lc-lscr + 0.5 | 0 |
|
05.04.2020, 15:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от voraa
|
|
В Хроме все ОК
|
на полном скроле
<circle id="myBar" class="progress-bar" transform="rotate(-90, 75, 75)" style="stroke-dasharray: 439, 1;"></circle>
а должно быть 440, 0 |
|
05.04.2020, 18:38
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,700
|
|
|
Сколько не мучаю экран ресайзами, не могу добиться такого эффекта.
Всегда 440 0
Но и Math.round ничего не изменит.
Математика то не меняется.
|
|
05.04.2020, 18:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
voraa,
у меня меняется может у меня window.devicePixelRatio 1.25 на это влияет. с Math.round во всех браузерах проблем нет.
|
|
|
|
