Kuidas võidelda kerimisega

“Kerige tulevikku”, kurjad marslased - https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations

Esiteks - MIKS tuleb kerida kerimise vastu?

Lühidalt - kuna mõnikord peate blokeerima kogu lehega toimuva tegevuse. Leht peaks olema täiesti vastutustundetu. See on reegel. Lihtne reegel.

  • Te ei saa sellel klõpsata. Ei saa klõpsata.
  • Liigutage fookust või vajutage klahve. Ei saa vajutada.
  • Kerige seda. Ei saa kerida.

Ok siis - Millal peaks see olema vastutustundetu?

Kui peaksite keskenduma mitte lehele, vaid ainult mingile selle osale.

Näiteks modaalid - väikesed (või suured) kastid, hõljuvad ekraani keskel. Ülejäänud leht võiks isegi tuhmiks minna, sest…

modaal on ainus üksus, kellega peaksite tegutsema.
Modal blokeerib kõik, see on https://atlaskit.atlassian.com/packages/core/modal-dialog

Olen natuke üllatunud, et MDN-i modaalide dialoogi a11n artikkel rõhutab fookusehalduse ja õigete aaria atribuutide vajalikkust, kuid mitte kerimise blokeerimist.

Ja mitte tekstist kõneks blokeerimisega inertselt või aarias varjatud abil, praegu rakendatakse seda ainult käsu-ui ja sujuva-ui abil

Võib-olla pole see täiesti selge, miks peaks modaal blokeerima lehe kerimist. Kerimine tundub olevat ok, kui kaua seda näete.

Kuni saate aru, mida te lehte kerite. Ja kuigi see on see, mida tahtsite teha.

Seega on veel üks hea näide kerimise blokeerimise selgitamiseks täisekraani režiimi dialoog või „FocusedTask“. Midagi, mis kulutab kogu teie tähelepanu.

Tegelikult - see on halb näide (https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp)

Pärast avamist kulutab see kogu ekraani ning te ei näe enam põhilehe sisu ega saa sellega suhelda. Kuid saate seda kerida.

Vajan veel? Ok - komponent “pardaleminek”, mis juhendab teid lehe loomisel.

AtlasKiti “onboarding” on fantastiline - https://atlaskit.atlassian.com/packages/core/onboarding

Kujutame ette - saate lehte kerida. Ja te kerite seda lehte. Ja “prožektorid” keritakse välja. Ja teie klient kaob osaliselt keelatud rakenduses ...

Kuidas kerimist blokeerida?

Oh! See on ülilihtne - stiil = "ülevool: peidetud" kehal.

ülevool: peidetud eemaldab kerimisribad (need on peidetud) ja blokeerib kerimise, kui see ületäitumisrežiim pole keritav. Nii töötab CSS.

Kõik tehtud. Võite minna koju.

Aga… Safari

Jah - see ei tööta Mobile Safaris.

Üllatus!

  • Safari ignoreerib kere ülevoolu, võimaldades teil seda puudutada-kerida. Ja see on asi, mida saate puudutada-n tunda ainult päris iPhone'is, mitte Chrome'i jäljendamine.
  • See töötab pasuna, eriti vormide puhul, kui mõnede siltide puhul on puutetundlik kerimine toiming „lohista-n-tilguta” ja te ei saa neid mõtteid kerida.

Teise probleemi lahendamine on lihtne - muutke lihtsalt kerimiskäitumist:

> See võib olla midagi, mida soovite vaikimisi lubada!

Ja esimese probleemi lahendus on ka… lihtne… - event.preventDefault.

Ainus probleem - millist elementi kuulata ja millist sündmust vältida. Kõik modaali sisemised sündmused peaksid jääma elule, kõik sündmused väljaspool tuleks blokeerida ja kõik need sündmused võivad mullitada alates “ok-ish” elementidest kuni mitte-ok-ish.

Niisiis - iga sündmuse kohta, mis võib põhjustada kerimise, peate midagi arvutama, laskma seda kerimisel nimetada ja blokeerima sündmuse, mis võib kerida midagi, mida te ei soovi kerida.

Ma ütleksin - kasutage selle käsitlemiseks väliseid raamatukogusid.

Järeldus

Niisiis - töölaua- ja Androidi brauserites kerimise tapmiseks ja Safari leevendamiseks sündmuste ärahoidmiseks kasutage ülevoolu: peidetud kehal.

Lihtne?

Tegelikult mitte, meil jäi üks punkt puudu. Kerimisribad!

Tapa kerimisriba!

Kerimine on keelatud ainult siis, kui kerimisribad on keelatud.

Küsimus - teil oli kerimisriba ja nüüd olete selle eemaldanud. Kas see on alles?

Kerimisribad kadusid! Täiesti!
Mul pole Windowsi masinat, vabandust

Selle tulemusel lehel olete nüüd 17 pikslit laiem ja kogu teie sisu "hüppas". See on parasiit ja üsna ebameeldiv jabur mõju, mida me ei kannata.

Seda on lihtne leevendada - tuvastage kerimisriba laius, mis on seadistatud keha polstriks.

Ja viimane “boonus” kraam - käepideme korpusega korralikult: normaalsetel elementidel peab olema “paremal” seal, nagu see oli enne, st “piluga”, samal ajal kui luku sees olevate elementide puhul “õige” peaks olema paremal aknas.

“Lünga” täitmine polstrigaRight.

Märkus. Absoluutselt paigutatud elemendid kleepuvad akna serva. See võib olla midagi, mida soovite - kuvage element servast servani. Kuid teate, nende elementide sisu "raputab" ja tõenäoliselt pole see just see, mida te tegelikult soovite.

Lünga täitmine marginaaliga.

Märkus. Esimene (punane) ja kolmas (nimeta) element ei muuda oma positsiooni, teine ​​(positsioon: fikseeritud) jääb siiski serva külge. See on fikseeritav - kui me korpuse fikseerime - võime kinnitada mis tahes muu elemendi.

Tõenäoliselt vajate seda käitumist.
Lõbus fakt - enamus raamatukogusid kasutab polsterdeid. Kas teil on ideid, miks?

Täna on ainult üks raamatukogu (ja vabandust - see põhineb Reaktil, otsige end vabalt kahvliteks ja kinnitage oma virna), mis teeb seda õigesti:

Veel üks järeldus

Samm elemendi kerimise vältimiseks:

  • Lisage ülevool: peidetud kehaelemendil.
  • Safari puutetundlike sündmuste käsitlemine.
  • Hoidke kerimisriba tühikut.

Plusspunkt: pange täisekraanilukud tööle ilma tühikuteta.

Ja olgem ausad, see pole nii lihtne, nagu 1. – 2. Üksikasjad, kurat on detailides. Kasutage palun kolmandate osapoolte raamatukogusid - need aitavad teid. Palju! Nagu tavaliselt.

Loe

Lisateave kerimis- ja kerimisprobleemide kohta. See on kõigi aegade parim artikkel.

Lisateave kerimise / ratta / puuteürituse tühistamise kohta

Ja ärge unustage „õige fookuse juhtimist”, mida mainisin artikli alguses, kuid ei selgitanud õigesti:

Kasutage

DOM (Vanilla JS)

Kere kerimislukk: hõlmab kõiki 3 sammu. Tsitaat kompaktne. Võimaldab seesmist keritavat elementi, mis võib ühel päeval tekitada tõelise tootmisprobleemi. Tõenäoliselt ei soovitaks ma seda, kuid kirjutan selle artikli selle raamatukogu kohta käivast artiklist tulenevalt, nii et - aitäh keha kerimise-lukustamise eest.

Kerimislukk: hõlmab kõiki kolme sammu, sealhulgas pesastatud keritavaid konteinereid ja konfigureeritavat, mis sobib igaks vajaduseks. See raamatukogu sai kõigest mõned ️, kuid väärt miljon.

Dom-Locky: tegeleb ainult "takistava" sammuga, kuid teeb seda õigesti. Käsitsite kerimisriba ise ja peate tegelema ainult puuteüritustega - kasutage seda teeki.

Reageeri

React-scroll-locky: täisfunktsionaalne kogu, mis hõlmab 3 sammu. Toetage pesastatud lukke, pesastatud keritavaid komponente ja täiesti purunematuid.

Reakt-eemalda-keri: veel üks kerimislukustatud versioon, kaks korda väiksem ja reageerimisportaalid on teadlikud (see on ilmselt Reacti jaoks parim valik)

Reakt-kerimislukk: täisfunktsionaalne kogu, mis hõlmab 3 sammu. Ei toeta pesastatud lukke, pesastatud keritavaid komponente, portaale ja kasutab keha polstrit. Kuid ma pean seda mainima, kui olen vastusena sellele loonud oma.

Lisa

Kerimisribad on katki. See on fakt. Sellepärast peame neid varjama, samal ajal kui peame neid keelama. Mitte kõik brauserid ei võimalda teil neid juhtida. Kõigil brauseritel pole neid isegi. Võtke oma saatus enda kätte -