Pārmērīga uzvedība - CSS-triki

Anonim

overscroll-behaviorĪpašums CSS kontroli, vai elements izmantosim "ritināšanas Virknējuma" vai ne. Jūs, iespējams, esat pieredzējis šo uzvedību jau iepriekš un, iespējams, uzskatījāt par pašsaprotamu, ka ritināšana tīmeklī darbojas šādi! Ja atrodaties elementā, kuram ir sava ritināšana (teiksim, ka tas ir vertikāls), un esat ritinājis uz leju tā apakšdaļā, pēc noklusējuma nākamais vecāku elements uz augšu (varbūt pati lapa) sāk ritināt šajā virzienā. Ja nevēlaties šo noklusējumu, overscroll-behaviortas to kontrolē.

.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )

Skatiet
Krisa Koijera (@chriscoyier) pildspalvveida pilnšļirces uzvedību
vietnē CodePen.

Īpašuma kaskādes (ti, ir iedzimta), tādēļ, ja jums nepatīk, ka kāds elements to dara, varat to pielietot ķermenim, lai tas nenotiktu nekur:

body ( overscroll-behavior: contain; /* or "none" */ )

noneVērtība ir paredzēts, lai apturētu ritinot pāri malai affordance , kas mans labākais minējums nozīmē, ka lietas, piemēram, gumijas aplīmēšanas sīkumi, ka dažas pārlūkprogrammas darīt, jo īpaši ierīces ar touchpad ritināšanu.

Noklusējuma vērtība ir auto.

Resursi

  • CSS pārveides uzvedības moduļa 1. līmenis
  • Web platformas jaunumi

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
65 59 11 79

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 81.
  • B
    • fons-filtrs
    • aizmugures virsmas redzamība
    • fons
    • fona piestiprināšana
    • background-blend-mode
    • fona klips
    • fona krāsa
    • fona attēls
    • fona izcelsme
    • background-position
    • fona atkārtojums
    • fona lielums
    • asiņot
    • bloķēt pārpildi
    • robežas
    • robežas robeža
    • robežas sabrukums
    • robežas attēls
    • robežas rādiuss
    • robežu atstatums
    • apakšā
    • kaste-dekorēšana-pārtraukums
    • kaste-ēna
    • kastes izmēru noteikšana
    • ielaušanās
  • C
    • parakstu pusē
    • caret
    • caret-krāsa
    • caret-formas
    • skaidrs
    • klipa ceļš
    • krāsa
    • pielāgot krāsu
    • kolonnu skaits
    • kolonnu aizpildīšana
    • kolonnu sprauga
    • kolonnas noteikums
    • kolonna-noteikums-krāsa
    • kolonnas noteikuma stils
    • kolonnas noteikuma platums
    • kolonnas laidums
    • kolonnas platums
    • kolonnas
    • satur
    • saturu
    • pretapaugsme
    • pretatiestatīšana
    • counter-set
    • kursors
  • D
    • virzienu
    • displejs
  • E
    • tukšās šūnas
  • F
    • aizpildīt
    • filtru
    • elastība
    • elastīgi
    • elastīgs virziens
    • elastīga plūsma
    • elastīgi augt
    • elastīgi sarukt
    • elastīgi iesaiņot
    • peldēt
    • fonts
    • fontu parādīšana
    • fontu saime
    • font-feature-settings
    • fontu kodēšana
    • fontu optiskā izmēra noteikšana
    • fonta izmērs
    • fonta lieluma pielāgošana
    • fontu stiept
    • fonta stils
    • fontu sintēze
    • fonts-variants
    • fonts-variants-cipars
    • fonta svars
  • G
    • plaisa
    • režģa rinda / režģa kolonna
    • grid-template-kolonnas / grid-template-rindas
  • H
    • karājas-pieturzīmes
    • augstums
    • defises
  • Es
    • attēlu renderēšana
    • sākuma burts
    • iekļauts izmērā
    • ieliktnis
    • ieliktnis-bloks
    • inset-block-end
    • ielikt-bloķēt-sākt
    • ieliktnis
    • inset-inline-end
    • ievietot-inline-start
    • izolācija
    • attaisnot-saturu
    • attaisnot vienumus
  • K
  • L
    • pa kreisi
    • burtu atstarpes
    • līnijas pārtraukums
    • līnijas skava
    • līnijas augstums
    • saraksta stils
  • M
    • starpība
    • margin-block
    • margin-block-end
    • margin-block-start
    • margin-inline
    • margin-inline-end
    • margin-inline-start
    • maska-klips
    • maska-attēls
    • mask-mode
    • maska-izcelsme
    • maska-pozīcija
    • maska-atkārtojums
    • maskas izmērs
    • max-augstums
    • max-inline-size
    • max platums
    • min-augstums
    • min platums
    • mix-blend-mode
  • N
  • O
    • objekts
    • objekta-pozīcijas
    • nobīdes enkurs
    • nobīdīts attālums
    • nobīdes ceļš
    • nobīdīt-pagriezt
    • necaurredzamība
    • rīkojumu
    • bāreņi
    • izklāsts
    • kontūra-nobīde
    • pārplūst
    • pārplūdes enkurs
    • pārplūdes ietīšana
    • pārmērīga ritināšana
  • P
    • polsterējums
    • lapu pārtraukums
    • krāsu pasūtīšana
    • perspektīvā
    • perspektīva-izcelsme
    • vietas priekšmeti
    • pointer-events
    • pozīciju
  • J
    • pēdiņas
  • R
    • mainīt izmērus
    • pa labi
    • rindu atstarpe
  • S
    • ritināšanas uzvedība
    • ritināšanas mala
    • ritināšanas polsterējums
    • ritiniet-snap-līdziniet
    • ritiniet-snap-stop
    • scroll-snap tipa
    • ritjosla
    • ritjoslas krāsa
    • ritjosla-notekas
    • ritjoslas platums
    • formas-attēla-slieksnis
    • forma-mala
    • forma-ārpuse
    • runāt
    • insults
    • insults-dasharray
    • insults-dashoffset
    • insults-linecap
    • insulta līnijas pievienošanās
    • gājiena platums
  • T
    • cilnes lielums
    • tabulas izkārtojums
    • izlīdzināt tekstu
    • text-align-last
    • teksts-apvienot-vertikāli
    • teksta noformēšana
    • teksta apdare-krāsa
    • teksta apdare-līnija
    • teksta apdare-izlaist
    • teksta noformēšana-izlaišanas tinte
    • teksta apdares stils
    • teksta apdares biezums
    • teksta ievilkums
    • tekstu pamatot
    • orientēšanās uz tekstu
    • teksta pārpilde
    • teksta atveide
    • teksta ēna
    • teksta trieciens
    • teksta pārveidošana
    • teksts-pasvītrojums-nobīde
    • text-underline-position
    • augšā / apakšā / pa kreisi / pa labi
    • pieskāriena darbība
    • pārveidot
    • pārveidot-izcelsmi
    • pārveidot stilu
    • pāreja
    • pārejas kavēšanās
    • pārejas ilgums
    • pārejas īpašums
    • pārejas laika funkcija
  • U
    • unicode-bidi
    • unikoda diapazons
    • izvēlieties lietotāju
  • V
    • vertikāli-izlīdzināt
    • redzamība
  • W
    • baltā telpa
    • atraitnes
    • platums
    • mainīšos
    • vārdu pārtraukums
    • vārdu atstarpes
    • rakstīšanas režīms
  • X
  • Z
    • z indekss
    • tuvināt
  • Atlasītāji
    • A
      • ::pirms pēc
      • : aktīvs
      • : jebkura saite
      • Blakus esošais brālis un māsa
      • (atribūts)
    • B
      • : tukšs
    • C
      • : pārbaudīts
      • : pašreizējais
      • Bērns
      • Klase
    • D
      • : noklusējums
      • : dir ()
      • : invalīds
      • Pēcnācējs
    • E
      • : tukšs
      • : iespējots
    • F
      • :: pirmais burts
      • ::pirmā līnija
      • : pirmais bērns
      • : pirmā veida
      • : fokuss
      • : fokuss redzams
      • : fokuss-iekšpusē
      • : nākotne
    • G
      • Vispārējais brālis
    • H
      • : virziet kursoru
    • Es
      • : diapazonā
      • : nenoteikts
      • : nederīgs
      • : ir ()
      • ID
    • K
    • L
      • : lang ()
      • :Pēdējais bērns
      • : pēdējā veida
      • : saite
    • M
      • :: marķieris
      • : spēles ()
    • N
      • : nav ()
      • : n-tas bērns
      • : n-pēdējais bērns
      • : n-pēdējā veida tips
      • : n-tā tipa
    • O
      • :vienīgais bērns
      • : tikai veida
      • :neobligāti
      • : ārpus diapazona
    • P
      • :: vietturis
      • : pagātne
      • : parādīts vietturis
    • J
    • R
      • : lasīt-rakstīt /: tikai lasāms
      • : nepieciešams
      • : sakne
    • S
      • :: atlase
    • T
      • : mērķis
      • Tips
    • U
      • : lietotājs nav derīgs
      • Universāls
    • V
      • : derīgs
      • : apmeklēja
    • W
    • X
    • Z
  • Mūsu mācību partneru priekšgala meistari

    Nepieciešama priekšgala attīstības apmācība?

    Frontend Masters ir labākā vieta, kur to iegūt. Viņiem ir kursi par visām svarīgākajām priekšgala tehnoloģijām, sākot no React līdz CSS, no Vue līdz D3 un tālāk, izmantojot Node.js un Full Stack.