Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Круговой индикатор скролла страницы (https://javascript.ru/forum/xhtml-html-css/79872-krugovojj-indikator-skrolla-stranicy.html)

MOT 03.04.2020 12:49

Круговой индикатор скролла страницы
 
Привет всем! Помогите переделать линейный индикатор в круговой:
<!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.Тут чего-то не работает полоса прокрутки

рони 03.04.2020 13:15

Цитата:

Сообщение от MOT
Тут чего-то не работает полоса прокрутки

<!DOCTYPE html> хотя бы добавьте

voraa 05.04.2020 12:10

А где ты индикатор размещать хочешь?
Можно с помощью 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>

рони 05.04.2020 13:20

voraa,
строка 65 может Math.round ?

voraa 05.04.2020 13:29

Цитата:

Сообщение от рони (Сообщение 522241)
voraa,
строка 65 может Math.round ?

var lns = (lc-lscr+0.5) | 0;

:D

рони 05.04.2020 14:05

Цитата:

Сообщение от voraa
+0.5

круг всё равно не замкнулся, может всё таки Math.round? :)

voraa 05.04.2020 15:23

Не. Из принципа:D
В Хроме все ОК,
Файрфокс чудит

Вот так вроде нормально
var lscr = lc * scrolled + 0.5 | 0;
var lns = lc-lscr + 0.5 | 0

рони 05.04.2020 15:46

Цитата:

Сообщение от voraa
В Хроме все ОК

на полном скроле
<circle id="myBar" class="progress-bar" transform="rotate(-90, 75, 75)" style="stroke-dasharray: 439, 1;"></circle>

а должно быть 440, 0

voraa 05.04.2020 18:38

Сколько не мучаю экран ресайзами, не могу добиться такого эффекта.
Всегда 440 0
Но и Math.round ничего не изменит.
Математика то не меняется.

рони 05.04.2020 18:44

voraa,
у меня меняется :) может у меня window.devicePixelRatio 1.25 на это влияет. с Math.round во всех браузерах проблем нет.


Часовой пояс GMT +3, время: 08:18.