JavaScript ja sivun vieritys

Anonyymi

Tässä alla on vierityksen Y-position tulostus console ikkunaan, mutta kuinka tunnistan että vieritystä ei voi pidemmälle jatkaa, onko jotain muuttujaa johon tuota scrollY arvoa verraten tunnistaisi sivun lopun saavutetuksi.

window.addEventListener('scroll', function(e) {
console.log(window.scrollY);
});

10

127

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Anonyymi

      Skrollattavan elementin korkeus on: document.documentElement.scrollHeight
      Ja ikkunan näkyvän osan korkeus: window.innerHeight

      Noiden avulla saat varmaan laskettua.

      • Anonyymi

        Miten tuo pitäisi laskea, ( window.scrollY ) on paljon pienempi arvo kuin ( document.documentElement.scrollHeight )


      • Anonyymi

        1370 = document.documentElement.scrollHeight
        468 = window.scrollY


      • Anonyymi
        Anonyymi kirjoitti:

        Miten tuo pitäisi laskea, ( window.scrollY ) on paljon pienempi arvo kuin ( document.documentElement.scrollHeight )

        Kun window.innerHeight window.scrollY on melkein tai tasan document.documentElement.scrollHeight ollaan alalaidassa.

        Logita konsoliin ja vierittele edestakaisin, niin ymmärrät varmaan logiikan.

        console.log(document.documentElement.scrollHeight,window.innerHeight,window.scrollY);


      • Anonyymi
        Anonyymi kirjoitti:

        Kun window.innerHeight window.scrollY on melkein tai tasan document.documentElement.scrollHeight ollaan alalaidassa.

        Logita konsoliin ja vierittele edestakaisin, niin ymmärrät varmaan logiikan.

        console.log(document.documentElement.scrollHeight,window.innerHeight,window.scrollY);

        Kumpa ne ei mene lähellekkään tasan kuten edellä jo kerroin, eli silloin kun ollaan sivun alalaidassa on arvot nämä:

        1370 = document.documentElement.scrollHeight
        468 = window.scrollY


      • Anonyymi
        Anonyymi kirjoitti:

        Kun window.innerHeight window.scrollY on melkein tai tasan document.documentElement.scrollHeight ollaan alalaidassa.

        Logita konsoliin ja vierittele edestakaisin, niin ymmärrät varmaan logiikan.

        console.log(document.documentElement.scrollHeight,window.innerHeight,window.scrollY);

        Ja tämä antamasi arvojen tulostus palauttaa arvot

        console.log(document.documentElement.scrollHeight,window.innerHeight,window.scrollY);

        2196 = document.documentElement.scrollHeight
        902 = window.innerHeight
        1274 = window.scrollY


      • Anonyymi
        Anonyymi kirjoitti:

        Kumpa ne ei mene lähellekkään tasan kuten edellä jo kerroin, eli silloin kun ollaan sivun alalaidassa on arvot nämä:

        1370 = document.documentElement.scrollHeight
        468 = window.scrollY

        Testasin lokituksella (keskimmäinen luku siis summa)
        console.log(document.documentElement.scrollHeight,window.innerHeight window.scrollY,window.scrollY);

        Skrollatessa ylhäältä alas:

        123 95 1
        123 97 3
        123 98 4
        123 102 8
        123 106 12
        123 109 15
        123 111 17
        123 116 22
        123 118 24
        123 119 25
        123 121 27
        123 122 28
        123 123 29

        Eli toimii kuten aiemmin kerroin.


      • Anonyymi
        Anonyymi kirjoitti:

        Testasin lokituksella (keskimmäinen luku siis summa)
        console.log(document.documentElement.scrollHeight,window.innerHeight window.scrollY,window.scrollY);

        Skrollatessa ylhäältä alas:

        123 95 1
        123 97 3
        123 98 4
        123 102 8
        123 106 12
        123 109 15
        123 111 17
        123 116 22
        123 118 24
        123 119 25
        123 121 27
        123 122 28
        123 123 29

        Eli toimii kuten aiemmin kerroin.

        Eikun just niin, hyvä, toimiihan tuo, jäi tuo PLUS merkki pois välistä.


      • Anonyymi
        Anonyymi kirjoitti:

        Eikun just niin, hyvä, toimiihan tuo, jäi tuo PLUS merkki pois välistä.

        Hyvä, KIITOS


      • Anonyymi
        Anonyymi kirjoitti:

        Ja tämä antamasi arvojen tulostus palauttaa arvot

        console.log(document.documentElement.scrollHeight,window.innerHeight,window.scrollY);

        2196 = document.documentElement.scrollHeight
        902 = window.innerHeight
        1274 = window.scrollY

        Jos tuossa oli skrollattu alalaitaan, niin summa on silloin 2176, eli melkein tuo elementin korkeus. Se ei välttämätä aina skrollaudu ihan pikselilleen riippuen mistä roikkuu, joten pitää verrata vaikka 0,99x:ään korkeudesta.


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Ja taas ammuttu kokkolassa

      Kokkolaisilta pitäisi kerätä pois kaikki ampumaset, keittiöveitset ja kaikki mikä vähänkään paukku ja on terävä.
      Kokkola
      72
      6348
    2. Mitä siellä ABC on tapahtunut

      Tavallista isompi operaatio näkyy olevan kyseessä.
      Alajärvi
      138
      5772
    3. Helena Koivu on äiti

      Mitä hyötyä on Mikko Koivulla kohdella LASTENSA äitiä huonosti . Vie lapset tutuista ympyröistä pois . Lasten kodista.
      Kotimaiset julkkisjuorut
      486
      3654
    4. Ovatko naiset lopettaneet sen vähäisenkin vaivannäön Tinderissa?

      Meinaan vaan profiileja selatessa nykyään valtaosalla ei ole minkäänlaista kirjoitettua tekstiä siellä. Juuri ja juuri s
      Nettideittailu
      120
      2059
    5. Kuvaile elämäsi naista

      Millainen hän on? Mikä tekee hänestä sinulle erityisen?
      Ikävä
      39
      1361
    6. Suomi vietiin Natoon väärin perustein. Viides artikla on hölynpölyä. Yksin jäämme.

      Kuka vielä uskoo, että viides artikla takaa Suomelle avun, jos Suomeen hyökätään. Liikuttavasti täällä on uskottu ja ved
      Maailman menoa
      402
      1345
    7. Et ilmeisesti aio enää ikinä olla tekemisissä

      Että näinkö se menee
      Ikävä
      73
      1173
    8. Sydämeni on sinun luona

      Koko ajan. Oli ympärilläni ketä oli niin sinä olet vain ajatuksissa ja tunteissa. En halua muiden kosketusta kuin sinun
      Ikävä
      47
      1034
    9. Trump ja Venäjä

      Huomasitteko muuten... Käytännössä ainoat valtiot, joille Trump EI eilen asettanut typeriä tariffejaan, olivat Venäjä ja
      Maailman menoa
      110
      952
    10. Jatkuva stressitila

      On sinun vuoksesi kun en tiedä missä mennään mutta tunteeni tiedän ainoastaan
      Ikävä
      56
      950
    Aihe