• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyliczanie procentowej pozycji elementu

VPS Starter Arubacloud
0 głosów
190 wizyt
pytanie zadane 3 sierpnia 2019 w JavaScript przez Magicone Nałogowiec (45,100 p.)

Hej, mam problem, z którym poram się już dosyć sporo czasu, więc postanowiłem uderzyć do was, po 2 latach nieobecności. :P Bardziej pewnie logika podchodzi pod matematykę i pominięcie jakichś wartości, niż front-end, ale myślę, że dacie radę mi z tym w jakiś sposób pomóc. ;) Problem jest taki: mam sobie kontener, którego pozycję chciałbym wyliczyć w mniej więcej taki sposób:

  • 0%, gdy dochodzimy do momentu scrolla, kiedy sam element jest jeszcze niewidoczny na ekranie, a jego scroll.
  • 50%, gdy element na ekranie znajduje się na jego środku.
  • 100%, gdy przescrollowany element z powrotem zaczyna być niewidoczny na ekranie.

 Wyliczam to obecnie w taki sposób, ale coś jest nie tak, bo podobnie jak na obrazku, przy 50% scrolla, żółte linie na obrazku nie są równe (a teoretycznie być powinny :P). Finalnie: pytanie brzmi - czy ktoś potrafi wskazać mi błąd w logice wyliczania tych procentów?

1 odpowiedź

+1 głos
odpowiedź 3 sierpnia 2019 przez pablop76 VIP (123,060 p.)
edycja 3 sierpnia 2019 przez pablop76

Użyj metody getBoundingClientRect do okreslenia pozycji względem okna widoku (viewport) i sprawdzaj czy znajduje się w oczekiwanym polu

<div id="box"></div>
<div id="percentage">start scroll</div>
<div class="vline"></div>
var element = document.getElementById('box');
 
var count = document.getElementById('percentage');
let rectObject;
const intViewportHeight = window.innerHeight;
 
 
let ticking = false;
 
function doSomething(scroll_pos) {
  if(scroll_pos.top.toFixed()>intViewportHeight){
    console.log('nie widać')
  }else if((scroll_pos.top + rectObject.height) < 0){
      console.log("wyjechało do góry")
  }else if(scroll_pos.top.toFixed()<intViewportHeight/2){
    console.log("mineło pół")
  }else if(scroll_pos.top.toFixed()<intViewportHeight){
      console.log("widać")
  }
  count.textContent = scroll_pos.top;
}
 
window.addEventListener('scroll', function(e) {
 
  if (!ticking) {
		rectObject = element.getBoundingClientRect();
    window.requestAnimationFrame(function() {
      doSomething(rectObject);
      ticking = false;
    });
 
    ticking = true;
  }
});
body{
	height: 1000vh;
}    
#percentage {
      position: fixed;
      top: 0;
      right: 0;
      border: 1px dashed;
    }

    #box {
      position: relative;
      top: 142vh;
      background-color: skyblue;
      height: 66vh;
    }

    .vline {
      position: fixed;
      top: 50%;
      width: 100%;
      height: 3px;
      background-color: red;
    }

 

Podobne pytania

0 głosów
1 odpowiedź 1,824 wizyt
0 głosów
0 odpowiedzi 201 wizyt
pytanie zadane 12 stycznia 2019 w Sieci komputerowe, internet przez Patryk Kania Początkujący (310 p.)
0 głosów
2 odpowiedzi 228 wizyt
pytanie zadane 11 czerwca 2016 w C i C++ przez Maciek123233 Gaduła (3,400 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...