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

181

    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. Persuja tuntuu kiinnostavan vain muiden rahat

      En muista kenenkään muun olleen huolissaan yhtä paljon muiden rahoista kuin persujen. Mistähän se kertoo?
      Maailman menoa
      73
      2604
    2. Järkevä ehdotus: reilun 8 miljardin euron veronkorotukset

      Nykyinen hallitus on päästänyt valtion tulopuolen rappeutumaan, vaikka varallisuutta on Suomessa enemmän kuin koskaan. U
      Maailman menoa
      101
      2493
    3. Miksei asevelvollisuuden kuluja lasketa Nato-menoihin?

      Koskela (vas) kysyy aiheellisesti, että kun kerran palkka-armejaan perustuvat maat laskevat kysesestä toiminnasta aiheut
      Maailman menoa
      22
      2197
    4. Purralla luistaa hihna isolla pyörällä

      Näki taas eilisillan tv-tentissä kuinka paniikissa oli kannatusromahduksen takia. Ei saanut kuin tiuskittua yksittäisiä
      Maailman menoa
      49
      1884
    5. Antti Lindtman heikko johtaja - ei valtiomiesainesta lainkaan

      kyllä se eilen taas nähtiin. Ei pystynyt Antti vastaamaan edes toimittajan yhteen yksinkertaiseen kysymykseen - juu tai
      Maailman menoa
      97
      1834
    6. Miksi vasemmisto ei vastusta ulkomaisen halpatyövoiman maahantuontia

      joka heikentää suomalaisten duunarien työmarkkina-asemaa ja rasittaa Suomen julkista taloutta? Vasemmistolla ideologin
      Maailman menoa
      119
      1744
    7. Miksi kaikki avioeronneet miehet eivät kunnioita naisia?

      Niin. Miksi avioeronneet miehet kohtelevat huonosti naisia, jotka lähestyvät heitä? Tämä on kokemuksen rintaääntä. Tämä
      Sinkut
      259
      1699
    8. Haluat nainen torjua minut

      Yhä uudelleen ja uudelleen. Huomaan sen. Ymmärrän miksi, mutta silti se sattuu. Eihän minulla ole muuta kuin haaveet si
      Ikävä
      11
      1228
    9. Mitä koululla tapahtui?

      Onks kellää mitää vinkkilöit miks helikopteria tarvittii vuoksenniskan koulul https://www.is.fi/kotimaa/art-200001193287
      Imatra
      34
      1144
    10. Persuilla kannatusromahdus - enää 13,5%.

      Ylen tuorein puolueiden kannatusmittaus kertoo, että persujen kannatus on enää 13,5 prosenttiyksikköä. Kepu on mennyt he
      Perussuomalaiset
      326
      1056
    Aihe