Kuinka piilottaa roolipalkki
- Edellinen sivu Mukautettu roolipalkki
- Seuraava sivu Näytä/pakota näyttää roolipalkki
Opit, miten CSS:llä piilotetaan roolipalkit.
Kuinka piilottaa roolipalkki
Lisää overflow: hidden;voit piilottaa sekä vaak- että pystyroolipalkit.
Esimerkki
body {
overflow: hidden; /* Piilota roolipalkit */
}
Jos haluat piilottaa vain pystyroolipalkin tai vain vaakaroolipalkin, käytä overflow-y tai overflow-x:
Esimerkki
body {
overflow-y: hidden; /* Piilota pystyroolipalkki */
overflow-x: hidden; /* Piilota vaakaroolipalkki */
}
Huomaa, ettäoverflow:hidden Tämä poistaa myös roolipalkkien toiminnallisuuden. Sivulla ei voi roollaa.
Piilota roolipalkinnot mutta säilytä toiminnallisuus
Jos haluat piilottaa roolipalkinnot mutta silti pystyä roollamaan, voit käyttää seuraavaa koodia:
Esimerkki
/* Piilota roolipalkinnot Chrome, Safari ja Opera:lle */
.example::-webkit-scrollbar {
display: none;
}
/* Piilota roolipalkinnot IE:lle, Edge:lle ja Firefoxille */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Webkit-selaimet (esim. Chrome, Safari ja Opera) tukevat epästandardia ::-webkit-scrollbar Pseudoelementti, joka mahdollistaa selaimen roolipalkinnot ulkoasun muokkaamisen. IE ja Edge tukevat -ms-overflow-style: Ominaisuus, jota Firefox tukee scrollbar-width Ominaisuudet, jotka sallivat meidän piilottaa roolipalkinnot mutta säilyttää niiden toiminnallisuuden.
Tiedostot
Opas:CSS ylivuoto
Viittauskirja:CSS overflow ominaisuus
- Edellinen sivu Mukautettu roolipalkki
- Seuraava sivu Näytä/pakota näyttää roolipalkki
