Tämä
<div id="" style="overflow:scroll; height:400px;">
antaa div
, jota käyttäjä voi selata sekä vaaka- että pystysuunnassa. Miten muutan sen niin, että div on vain pystysuunnassa vieritettävissä?
Sinulla on kaikki hallussa, paitsi että käytät väärää ominaisuutta. Vierityspalkki voidaan käynnistää millä tahansa ominaisuudella overflow
, overflow-x
tai overflow-y
, ja jokaisen ominaisuuden arvoksi voidaan asettaa visible
, hidden
, scroll
, auto
tai inherit
. Tällä hetkellä tarkastelet näitä kahta:
auto
- Tämä arvo tarkastelee laatikon leveyttä ja korkeutta. Jos ne on määritelty, se ei anna laatikon laajentua näiden rajojen yli. Sen sijaan (jos sisältö ylittää nämä rajat), se luo vierityspalkin jommallekummalle rajalle (tai molemmille), joka ylittää sen pituuden.
scroll
- Tämä arvo pakottaa vierityspalkin, vaikka sisältö ei ylittäisikään asetettuja rajoja. Jos sisältöä ei tarvitse vierittää, palkki näkyy muodossa "disabled" tai ei-interaktiivisena.
Jos haluat aina pystysuoran vierityspalkin näkyvän:
Sinun tulisi käyttää overflow-y: scroll
. Tämä pakottaa vierityspalkin näkymään pystyakselilla riippumatta siitä, tarvitaanko sitä vai ei. Jos et voi itse asiassa vierittää kontekstia, se näkyy vierityspalkkina, joka on "poistettu käytöstä".
Jos haluat vierityspalkin näkyvän vain, jos voit vierittää ruutua:
Käytä vain overflow: auto
. Koska sisältösi siirtyy oletusarvoisesti vain seuraavalle riville, kun se ei mahdu nykyiselle riville, vaakasuuntaista vierityspalkkia ei luoda (paitsi jos se on elementissä, jonka sanojen kääriminen on poistettu käytöstä). Pystypalkin osalta se sallii sisällön laajentua määrittämäsi korkeuteen asti. Jos se ylittää tämän korkeuden, se näyttää pystysuuntaisen vierityspalkin, jotta voit tarkastella loput sisällöstä, mutta se ei näytä vierityspalkkia, jos se ei ylitä korkeutta.