Pernelyg didelis elgesys - CSS-gudrybės

Turinys

overscroll-behaviorCSS kontrolės nuosavybė, ar elementas bus naudojamas "slinkties Grupavimo", ar ne. Jūs tikriausiai patyrėte tokį elgesį anksčiau ir galbūt laikėte savaime suprantamu dalyku, kad slinkimas taip veikia žiniatinklyje! Jei esate elemento viduje, kuris turi savo slinkimą (tarkime, kad jis yra vertikalus) ir slinkote žemyn iki jo apačios, tada pagal numatytuosius nustatymus kitas pagrindinis elementas aukštyn (galbūt pats puslapis) pradeda slinkti ta kryptimi. Jei nenorite, kad numatytasis nustatymas, overscroll-behaviortai jį valdo.

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

Peržiūrėkite
Chriso Coyier'io (@chriscoyier)
„Pen overroll“ elgesį „ CodePen“.

Nuosavybės kaskados (t. Y. Paveldimos), todėl jei jums nepatinka tai daryti, galite ją pritaikyti kūnui, kad niekur nenutiktų:

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

noneVertė turėtų sustabdyti slenkant affordance , kuris mano spėjimą reiškia, kad stuff like that gumos laminavimo stuff, kad kai kurios naršyklės padaryti, ypač prietaisų su Touchpad slinkimo.

Numatytoji vertė yra auto.

Ištekliai

  • CSS peržiūros elgesio modulis, 1 lygis
  • Žiniatinklio platformos naujienos

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
65 59 11 79 Ne

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 Ne
  • B
    • fonas-filtras
    • galinės dalies matomumas
    • fonas
    • prisirišimas prie fono
    • fono mišinio režimas
    • fono klipas
    • fono spalva
    • fonas-vaizdas
    • fono kilmė
    • fonas-padėtis
    • fonas pakartoti
    • fono dydis
    • kraujuoti
    • blokuoti perpildymą
    • sienos
    • pasienio siena
    • sienos griūtis
    • riba-vaizdas
    • pasienio spindulys
    • sienos atstumas
    • dugnas
    • dėžutės dekoravimas-pertrauka
    • dėžutė-šešėlis
    • dėžutės dydis
    • įsilaužimas
  • C
    • antraštė
    • caret
    • caret-color
    • caret-formos
    • aišku
    • klipo kelias
    • spalva
    • sureguliuoti spalvą
    • stulpelių skaičius
    • stulpelio užpildymas
    • stulpelio tarpas
    • stulpelio taisyklė
    • stulpelio taisyklės spalva
    • stulpelio taisyklės stilius
    • stulpelio taisyklės plotis
    • stulpelio ilgis
    • stulpelio plotis
    • stulpeliai
    • turėti
    • turinys
    • priešpriešinis prieaugis
    • iš naujo nustatyti
    • kontrastinis rinkinys
    • žymeklis
  • D
    • kryptis
    • ekranas
  • E
    • tuščios ląstelės
  • F
    • užpildyti
    • filtras
    • lankstytis
    • lanksčiai
    • lankstumo kryptis
    • lankstus srautas
    • lanksčiai augti
    • lankstytis-susitraukti
    • lankstyti-apvynioti
    • plūdė
    • šriftas
    • šrifto rodymas
    • šrifto šeima
    • šrifto funkcijos parametrus
    • šrifto šerdis
    • šrifto optinis dydis
    • šrifto dydis
    • koreguoti šrifto dydį
    • šrifto ištempimas
    • Šrifto stilius
    • šrifto sintezė
    • šriftas-variantas
    • šriftas-variantas-skaitmeninis
    • šrifto svoris
  • G
    • spraga
    • tinklelio eilutė / tinklelio stulpelis
    • tinklelio-šablono-stulpelių / tinklelio-šablono-eilučių
  • H
    • kabinimas-skyryba
    • ūgio
    • brūkšneliai
    • vaizdo perteikimas
    • pradinis laiškas
    • inline dydžio
    • įdėti
    • įterpti-blokuoti
    • intarpas-blokinis galas
    • įterpti-blokuoti-pradėti
    • įterptas
    • įterptas-įterptas
    • įterpti-įjungti-pradėti
    • Isolation
    • pateisinti turinį
    • pateisinti elementus
  • K.
  • L
    • paliko
    • tarpai tarp raidžių
    • linijos pertrauka
    • linijos spaustukas
    • linijos aukštis
    • sąrašo stiliaus
  • M
    • marža
    • paraštės blokavimas
    • margin-block-end
    • margin-block-start
    • paraštė įterpta
    • paraštė-įterptinė
    • paraštė-eilutė-pradžia
    • kaukė-segtukas
    • kaukė-vaizdas
    • kaukė-režimas
    • kaukė-kilmė
    • kaukė-padėtis
    • kaukė-pakartojimas
    • kaukės dydžio
    • max-aukštis
    • max-inline-size
    • maks. plotis
    • min aukščio
    • min pločio
    • mix-blend-mode
  • N
  • O
    • objektui tinkantis
    • objekto-padėties
    • kompensacinis inkaras
    • kompensuojamas atstumas
    • kompensuoti kelią
    • kompensuoti-pasukti
    • neskaidrumas
    • įsakymas
    • našlaičių
    • kontūras
    • kontūras-kompensuoti
    • perpildyti
    • perpildymo inkaras
    • perpildymas-apvyniojimas
    • pernelyg didelis elgesys
  • P
    • paminkštinimas
    • puslapio lūžis
    • dažų užsakymas
    • perspektyva
    • perspektyva-kilmė
    • vietos daiktai
    • rodyklė-įvykiai
    • poziciją
  • Klausimas
    • citatos
  • R
    • pakeisti dydį
    • teisingai
    • eilės tarpas
  • S
    • slinkimo elgesys
    • slinkties paraštė
    • slinkties užpildymas
    • slinkite-spragtelėkite-sulygiuokite
    • slinkti-spustelėti-sustabdyti
    • „scroll-snap“ tipo
    • slinkties juosta
    • slinkties juostos spalva
    • slinkties juosta
    • slinkties juostos plotis
    • forma-vaizdas-slenkstis
    • forma-paraštė
    • forma-išorė
    • kalbėti
    • insultas
    • insultas-dasharray
    • insultas-brūkšnys
    • smūgis-antdėklas
    • insultas-prisijungti
    • smūgio plotis
  • T
    • skirtuko dydis
    • stalo išdėstymas
    • sulyginti tekstą
    • text-align-last
    • tekstas-derinti-vertikaliai
    • teksto dekoravimas
    • tekstas-dekoravimas-spalva
    • teksto dekoravimo eilutė
    • teksto dekoravimas-praleidimas
    • teksto dekoravimas-praleidimo rašalas
    • teksto dekoravimo stiliaus
    • teksto apdailos storis
    • teksto įtrauka
    • tekstas-pagrįsti
    • orientacija į tekstą
    • teksto perpildymas
    • teksto perteikimas
    • tekstas-šešėlis
    • teksto brūkšnys
    • transformuoti tekstą
    • text-underline-offset
    • text-underline-position
    • viršuje / apačioje / kairėje / dešinėje
    • prisilietimas
    • transformuotis
    • transformuoti-kilmę
    • transformuoti stilių
    • perėjimas
    • perėjimas-vėlavimas
    • perėjimo trukmė
    • perėjimas-nuosavybė
    • pereinamojo laiko funkcija
  • U
    • „unicode-bidi“
    • „unicode“ diapazonas
    • vartotojo pasirinkimas
  • V
    • vertikaliai sulyginti
    • matomumas
  • W
    • balta vieta
    • našlės
    • plotis
    • pasikeis
    • žodžių lūžis
    • tarpai tarp žodžių
    • rašymo režimas
  • X
  • Y
  • Z
    • z indeksas
    • priartinti
  • Selektoriai
    • A
      • ::prieš po
      • : aktyvus
      • : bet kokia nuoroda
      • Gretimas brolis ir sesuo
      • (atributas)
    • B
      • :tuščias
    • C
      • : patikrinta
      • : srovė
      • Vaikas
      • Klasė
    • D
      • :numatytas
      • : dir ()
      • : neįgalus
      • Palikuonis
    • E
      • :tuščia
      • :įjungtas
    • F
      • ::pirmoji raidė
      • ::Pirma eilė
      • : pirmasis vaikas
      • : pirmojo tipo
      • : dėmesys
      • : matomas dėmesys
      • : sutelkti dėmesį
      • : ateitis
    • G
      • Bendrasis brolis
    • H
      • : užveskite pelės žymeklį
      • : diapazone
      • : neapibrėžta
      • : negalioja
      • : yra ()
      • ID
    • K.
    • L
      • : lang ()
      • :Paskutinis vaikas
      • : paskutinio tipo
      • : nuoroda
    • M
      • :: žymeklis
      • :degtukai()
    • N
      • : ne ()
      • : n-tas vaikas
      • : n-tas paskutinis vaikas
      • : n-asis paskutinis tipo
      • : n-tasis tipas
    • O
      • :vienintelis vaikas
      • : tik tipo
      • : neprivaloma
      • :nepasiekiamas
    • P
      • :: vietos rezervavimo ženklas
      • :praeitis
      • : rodoma vietos rezervavimo ženklas
    • Klausimas
    • R
      • : skaityti-rašyti /: tik skaityti
      • : reikalinga
      • : šaknis
    • S
      • ::pasirinkimas
    • T
      • : taikinys
      • Tipas
    • U
      • : netinkamas vartotojas
      • Universalus
    • V
      • : galioja
      • : aplankyta
    • W
    • X
    • Y
    • Z
  • Mūsų mokymosi partnerių „ Frontend“ meistrai

    Reikia „front-end“ mokymo mokymų?

    „Frontend Masters“ yra geriausia vieta jį gauti. Jie turi kursus apie visas svarbiausias „front-end“ technologijas, nuo „React“ iki CSS, nuo „Vue“ iki D3 ir dar daugiau su „Node.js“ ir „Full Stack“.

    Įdomios straipsniai...