Kuinka taistella -rullaa

”Selaa tulevaisuuteen”, pahat marssilaiset - https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations

Ensinnäkin - MIKSI joudutaan taistelemaan vierityksen kanssa?

Lyhyesti sanottuna - koska joskus joudut estämään kaiken vuorovaikutuksen sivun kanssa. Sivun tulee olla täysin vastuuton. Se on sääntö. Yksinkertainen sääntö.

  • Et voi klikata sitä. Ei voi napsauttaa.
  • Siirrä tarkennusta tai paina näppäimiä. Ei voi painaa.
  • Vieritä sitä. Ei voi vierittää.

Ok sitten - MITÄ sen pitäisi olla vastuutonta?

Kun sinun ei tulisi keskittyä sivulle, vaan vain osaan siitä.

Esimerkiksi modaalit - pienet (tai suuret) laatikot, kelluvat näytön keskellä. Loput sivu voisi olla jopa himmeä, cos…

modaali on ainoa kokonaisuus, jonka kanssa sinun pitäisi toimia.
Modaali estää kaiken, tämä on https://atlaskit.atlassian.com/packages/core/modal-dialog

Olen vähän yllättynyt siitä, että MDN Modal Dialog a11n -artikkeli korostaa tarkennuksen hallinnan ja asianmukaisten ariaominaisuuksien tarvetta, mutta ei vierityksen estämistä.

Eikä tekstin puheeksi estäminen inertin tai arialla piilotetun avulla, nyt toteutettu vain tavoite-ui- ja sileä-ui-sovelluksissa

Voi olla, että ei ole mikään selvää, miksi modaalin tulisi estää sivun vieritys. Vieritys näyttää olevan ok, kunhan sen näet.

Kun ymmärrät, mitä vierität sivua. Ja vaikka se on mitä halusit tehdä.

Siksi toinen hieno esimerkki selittääksesi miksi vieritys pitäisi estää, on Koko näytön modaalivalintaikkuna tai ”FocusedTask”. Jotain, joka kuluttaa kaiken huomion.

Oikeastaan ​​- tämä on huono esimerkki (https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp)

Kun se on avattu, se kuluttaa kaiken näytön, etkä enää näe etkä voi olla vuorovaikutuksessa pääsivun sisällön kanssa. Mutta voit selata sitä.

Tarvita lisää? Ok - ”onboarding” -komponentti, joka opastaa sinua ajattelemaan sivua.

AtlasKit “onboarding” on mahtava - https://atlaskit.atlassian.com/packages/core/onboarding

Kuvittelemme - voit vierittää sivua. Ja vierität sivua. Ja ”kohdevalot” vieritetään pois. Ja asiakkaasi katoaa osittain pois käytöstä sovelluksessa ...

Kuinka estää vierityksen?

Vai niin! Se on erittäin helppoa - style = "ylivuoto: piilotettu" vartaloon.

ylivuoto: piilotettu poistaa vierityspalkit (ne ovat piilotetut) ja estää vierityksen, kunhan tätä ylivuodotilaa ei voida vierittää. Näin CSS toimii.

Valmista. Saatat mennä kotiin.

Mutta… Safari

Jep - se ei toimi Mobile Safarissa.

Yllätys!

  • Safari ohittaa rungon ylivuodon, jolloin voit koskettaa ja vierittää sitä. Ja tämä on jotain, jota voit koskettaa ja tuntea vain oikeassa iPhonessa, ei Chrome-emuloinnissa.
  • Se toimii paskuna, etenkin lomakkeissa, kunhan pitkään ”kosketusvieritys” on ”vedä-pudota” -toiminto joillekin tunnisteille, etkä voi vierittää ajatettuja niitä.

Toisen ongelman ratkaisu on yksinkertainen - muuta vain vierityskäyttäytymistä:

> Tämä saattaa olla jotain, jonka haluat oletuksena ottaa käyttöön!

Ja ensimmäisen ongelman ratkaisu on myös… yksinkertainen… - event.preventDefault.

Ainoa ongelma - mitä elementtiä kuunnella ja mikä tapahtuma estää. Kaikkien modaalin sisällä olevien tapahtumien tulisi elää, kaikkien ulkopuolella olevien tapahtumien tulisi olla estetty, ja kaikki nämä tapahtumat voisivat kuplita ”ok-ish” -elementeistä ei-ok-ish: iin.

Joten - jokaisesta tapahtumasta, joka saattaa aiheuttaa vierityksen, on laskettava jotain, annettava sitä kutsua vieritettäväksi ja estettävä tapahtuma, joka saattaa vierittää jotain, jota et halua vierittää.

Sanoisin - käytä tätä ulkoisten kirjastojen avulla.

johtopäätös

Joten - käytä ylivuotoa: vartaloon piilotettu tappamaan vieritys työpöytä- ja Android-selaimissa ja estämään tapahtumia Safarin lieventämiseksi.

Helppo?

Oikeastaan ​​ei, meillä jäi yksi piste. Vierityspalkit!

Tapa vierityspalkki!

Vieritys on poistettu käytöstä vain, kun vierityspalkit ovat poissa käytöstä.

Kysymys - sinulla oli vierityspalkki, ja nyt olet poistanut sen. Se on jäljellä?

Vierityspalkit katosivat! Täysin!
Minulla ei ole ikkunakonetta, anteeksi

Tuloksena sivusi on nyt 17 pikseliä leveämpi, ja kaikki sisältösi "hyppäsi". Että loinen ja melko epämiellyttävä karu vaikutus, emme tule seisomaan.

Sitä on helppo lieventää - tunnistaa vierityspalkin leveys, joka on asetettu korin pehmusteeksi.

Ja viimeinen ”bonus” tavara - käsittele vartalon leveys oikein: normaaleilla elementeillä on oltava ”oikealla” siellä missä se oli ennen, ts. “Raolla”, kun taas “oikealla” lukon sisällä olevien elementtien tulisi olla ikkunan oikealla puolella.

”Aukon” täyttäminen paddingRightilla.

Huomaa - absoluuttisesti sijoitetut elementit tarttuvat ikkunan reunaan. Se voi olla jotain mitä haluat - näyttöelementti reunasta reunaan. Mutta tiedät, että näiden elementtien sisältö "ravistaa" ja luultavasti tämä ei ole mitä todella haluat.

Täytä "aukko" marginaalilla.

Huomaa - ensimmäinen (punainen) ja kolmas (ei nimeä) elementti eivät muuta sijaintiaan, kun taas toinen (sijainti: kiinteä) pysyy silti reunalla. Se on korjattavissa - niin kauan kuin "kiinnitämme" rungon - voimme korjata minkä tahansa muun elementin.

Todennäköisesti tarvitset tätä käyttäytymistä.
Hauska tosiasia - suurin osa kirjastoista käyttää pehmusteita. Onko ideoita miksi?

Nykyään on vain yksi kirjasto (ja pahoillani - se perustuu Reaktoriin, haarukoi vapaasti hakea ja ottaa se käyttöön kanssasi), joka tekee sen oikein:

Toinen päätelmä

Vaihe -elementin vierimisen estämiseksi:

  • Lisää ylivuoto: piilotettu runkoelementtiin.
  • Käsittele kosketustapahtumia Safarille.
  • Pidä vierityspalkin rako.

Plussapiste: saat koko näytön lukot toimimaan ilman ”aukkoa”.

Ja olkoon rehellinen, tämä ei ole niin helppoa kuin 1–3–3. Yksityiskohdat, paholainen on yksityiskohdissa. Käytä kolmansien osapuolien kirjastoja - ne auttavat sinua. Paljon! Kuten tavallista.

Lukea

Lue lisää vieritys- ja vieritysasioista. Tämä on kaikkien aikojen paras artikkeli.

Lue lisää vieritys / pyörä / kosketus -tapahtuman peruuttamisesta

Ja älä unohda "asianmukaista keskittymisen hallintaa", mainitsin artikkelin alussa, mutta en selittänyt oikein:

Käyttää

DOM (Vanilla JS)

Kehon vierityslukko: kattaa kaikki 3 vaihetta. Lainaus kompakti. Sallii yhden sisäisen vieritettävän elementin sisällä, mikä voi johtaa todelliseen tuotantokysymykseen yhtenä päivänä. En todennäköisesti suosittelisi sitä, mutta kirjoitan tämän artikkelin tätä kirjastoa koskevan artikkelin takia, joten - kiitos vartalo-vierityslukko.

Vierityslukko: Kattaa kaikki 3 vaihetta, mukaan lukien sisäkkäiset vieritettävät säilytysastiat, ja konfiguroitavat, suunnitellut, jokaiseen tarpeeseen sopivaksi. Tämä kirjasto sai vain muutaman ️, mutta miljoonan arvoinen.

Dom-Locky: käsittelee vain estävän askeleen, mutta tekee sen oikein. Käsitit vierityspalkkia itse, ja sinun on käsiteltävä vain kosketustapahtumia - käytä tätä kirjastoa.

suhtautua

Reaktio-vieritys lukittu: täyden ominaisuuden kirjasto, joka kattaa 3 vaihetta. Tukee sisäkkäisiä lukkoja, sisäkkäisiä vieritettäviä komponentteja ja ehdottomasti murtumatta.

React-poista-vieritä: toinen versio vierityslukitusta, kaksinkertaisesti pienemmistä ja reaaliaikaisista portaaleista tietoisissa (luultavasti tämä on Reaktin paras valinta)

Reakt-vierityslukko: täyden ominaisuuden kirjasto, joka kattaa 3 vaihetta. Ei tue sisäkkäisiä lukkoja, sisäkkäisiä vieritettäviä komponentteja, portaaleja ja käyttää korin pehmusteita. Mutta minun on mainittava se, kunhan olen luonut omat vastaukseksi tähän.

ylimääräinen

Vierityspalkit ovat rikki. Se on totta. Siksi meidän on piilotettava heidät, kun taas meidän on poistettava ne käytöstä. Kaikkien selainten avulla et voi hallita niitä. Kaikilla selaimilla ei ole edes niitä. Ota kohtalo omiin käsiisi -