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

176

    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. Hallitus pyrkii rajoittamaan kaupan omien halpamerkkien myyntiä

      Helsingin Sanomien mukaan hallitus valmistelee lakihanketta, joka suitsii kaupan valtaa ja rajoittaa omien halpamerkkien
      Yhteiskunta
      240
      3666
    2. Tapettu

      On joku kangaskadulla perjantaina
      Sotkamo
      57
      3393
    3. Björn Wahlroos, maataloustuet lakkautettava

      Sanoo pankkimies. Mitäs persut ja muut tukinulliem perskärpäset tähän? "Wahlroos listaa kansallisen maataloustuen. – I
      Maailman menoa
      90
      2853
    4. Persut päättivät hiilivoiman kieltämisestä Suomessa

      Moni on jo unohanut kuka hyväksyi hiilivoimaloiden kieltämisen Suomessa: persut Sukupuolineutraalit liikennemerkitk
      Maailman menoa
      48
      2646
    5. Työvoimatoimisto

      Nyt kysyisin miksi pitää käydä työvoimatoimistossa paikanpäällä, kun he eivät muuta tee kuin laittavat koneelle uudet ve
      Työttömyys
      116
      2405
    6. Nalle Wahlroos ei ulise kuten Teemu Selänne sähkölaskuista

      Nalle "hah hah" nauroi saamistaan sähkötuista, kun taas Teemu-poika itkeä tirautti kovasta sähkön hinnasta. Nalle nauro
      Maailman menoa
      35
      2042
    7. Muistattekos kuinka kokoomus ja persut vinkuivat sähkön hinnasta?

      Oppositiossa vuonna 2022, kun sähkön hinta uhkasi nousta 20 senttiin kilowattitunnilta? Nyt ovat hiiren hiljaa, kun pitä
      Maailman menoa
      101
      2001
    8. Vain persut vastustivat hiilivoimaloiden alasajoa

      Persut vastusti jyrkästi hiilen kieltolakia ja on myöhemmin vaatinut hiilivoimaloiden pitämistä käytössä. He perusteliva
      Maailman menoa
      42
      1865
    9. Mikä aate kaiken pahan takana?

      Se laiskistuttaa kansat, opettaa vaatimaan etuisuuksia, syleilee maailmoja eikä omaa kansaa.
      Maailman menoa
      104
      1797
    10. Mietin sua liikaa

      Mietin nytkin sitä, että millaista se olisi tulla kotiin, kun sinä olisit täällä vastassa. Tai niin päin, että sinä tuli
      Ikävä
      71
      1159
    Aihe