logo

Vytvorenie zvislého posúvania div pomocou CSS

Vytvorenie vertikálneho posúvania divu je jednoduché pomocou vlastnosti CSS overflow. Existujú rôzne hodnoty v prepadová vlastnosť . Túto vlastnosť môžeme použiť na získanie posúvača na webovú stránku. Nižšie uvedené príklady sú spôsoby nastavenia vertikálneho posúvača na webovej stránke.

Príklad 1: V tomto príklade sme nastavili overflow-x: hidden; a pretečenie-y: auto; ktorý automaticky skryje vodorovný posuvník a zobrazí iba zvislý posuvník.



html

konvertovať dátum reťazca








> <>html>>> <>head>>> ><>style>>> >h1 {> >color: Green;> >}> >div.scroll {> >margin: 4px, 4px;> >padding: 4px;> >background-color: green;> >width: 500px;> >height: 110px;> >overflow-x: hidden;> >overflow-y: auto;> >text-align: justify;> >}> >style>hlava>

techcodeview.comh1>
Je to dobrá platforma na učenie sa programovania. Ide o vzdelávaciu webovú stránku. Pripravte sa na nábor produktov spoločností ako Microsoft, Amazon, Adobe atď. s bezplatným online prípravným kurzom. Kurz sa zameriava na rôzne otázky týkajúce sa MCQ a kódovania, ktoré pravdepodobne zaznejú na pohovoroch, aby bola vaša nadchádzajúca sezóna umiestňovania efektívna a úspešná. Každý geekov môže tiež pomôcť iným geekom písaním článkov na techcodeview.com, publikovanie článkov sa riadi niekoľkými krokmi, ktoré sú články, ktoré si vyžadujú malú úpravu/vylepšenie od recenzentov. Ak chcete rýchlo skontrolovať svoje články, pozrite si existujúce články, ich štýl formátovania, štýl kódovania a snažte sa, aby ste sa k nim priblížili. V prípade, že ste začiatočník, môžete si prečítať Pokyny na napísanie článku div> center> body> html>>

>

>

Výkon:

ezgifcom-video-to-gif-(12)

Výkon

Príklad 2: V tomto príklade použite auto namiesto overflow-x:hidden; a overflow-y:auto; aby sa prvok div dal vertikálne posúvať.

html




> <>html>>> <>head>>> ><>style>>> >h1 {> >color: Green;> >}> >div.gfg {> >margin: 5px;> >padding: 5px;> >background-color: green;> >width: 500px;> >height: 110px;> >overflow: auto;> >text-align: justify;> >}> >style>hlava>

techcodeview.comh1>
Je to dobrá platforma na učenie sa programovania. Ide o vzdelávaciu webovú stránku. Pripravte sa na nábor spoločností založených na produktoch, ako sú Microsoft, Amazon, Adobe atď., pomocou bezplatného online prípravného kurzu na umiestnenie. Kurz sa zameriava na rôzne otázky týkajúce sa MCQ a kódovania, ktoré pravdepodobne zaznejú na pohovoroch, aby bola vaša nadchádzajúca sezóna umiestňovania efektívna a úspešná. Každý geekov môže tiež pomôcť iným geekom písaním článkov na techcodeview.com. Pri publikovaní článkov postupujte podľa niekoľkých krokov, pričom články, ktoré si vyžadujú malú úpravu/vylepšenie od recenzentov, sú publikované ako prvé. Ak chcete rýchlo skontrolovať svoje články, pozrite si existujúce články, ich štýl formátovania, štýl kódovania a snažte sa, aby ste sa k nim priblížili. V prípade, že ste začiatočník, môžete si prečítať Pokyny na napísanie článku div> center> body> html>>

>

>

Výkon:

ezgifcom-video-to-gif-(13)

Výkon