Izdelava div navpičnega drsenja z uporabo CSS

Izdelava div navpičnega drsenja z uporabo CSS

Z lastnostjo prelivanja CSS enostavno omogočite navpično drsenje po divu. Obstajajo različne vrednosti v lastnost prelivanja . To lastnost lahko uporabimo za pridobitev drsnega traku na spletni strani. Spodaj omenjeni primeri so načini za nastavitev navpičnega drsnega traku na spletni strani.

Primer 1: V tem primeru smo nastavili overflow-x: hidden; in overflow-y: auto; ki samodejno skrije vodoravni drsni trak in prikaže samo navpični drsni trak.

html




> <> 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>glava>

techcodeview.comh1>
Je dobra platforma za učenje programiranja. Je izobraževalna spletna stran. Pripravite se na zaposlovanje podjetij, ki temeljijo na izdelkih, kot so Microsoft, Amazon, Adobe itd., z brezplačnim spletnim pripravljalnim tečajem za zaposlitev. Tečaj se osredotoča na različna MCQ in vprašanja o kodiranju, ki bodo verjetno zastavljena na intervjujih, in poskrbi, da bo vaša prihajajoča sezona namestitve učinkovita in uspešna. Prav tako lahko vsi geeki pomagajo drugim geekom s pisanjem člankov na techcodeview.com, objavljanje člankov sledi nekaj korakom, ki so. Najprej se objavijo članki, ki jih recenzenti malo spremenijo/izboljšajo. Če želite hitro pregledati svoje članke, si oglejte obstoječe članke, njihov slog oblikovanja, slog kodiranja in se jim poskušajte približati. Če ste začetnik, si lahko ogledate Smernice za pisanje članka div> center> body> html>>>

Izhod:

ezgifcom-video-to-gif-(12)

Izhod

Primer 2: V tem primeru uporabite auto namesto overflow-x:hidden; in overflow-y:auto; da se div lahko navpično pomika.

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>glava>

techcodeview.comh1>
Je dobra platforma za učenje programiranja. Je izobraževalno spletno mesto. Pripravite se na zaposlovanje podjetij, ki temeljijo na izdelkih, kot so Microsoft, Amazon, Adobe itd., z brezplačnim spletnim pripravljalnim tečajem za zaposlitev. Tečaj se osredotoča na različna MCQ in vprašanja o kodiranju, ki bodo verjetno zastavljena na intervjujih, in poskrbi, da bo vaša prihajajoča sezona umestitev učinkovita in uspešna. Poleg tega lahko vsi geeki pomagajo drugim geekom s pisanjem člankov na techcodeview.com, objavljanje člankov sledi nekaj korakom, ki so. Najprej se objavijo članki, ki jih recenzenti malo spremenijo/izboljšajo. Če želite hitro pregledati svoje članke, si oglejte obstoječe članke, njihov slog oblikovanja, slog kodiranja in se jim poskušajte približati. Če ste začetnik, si lahko ogledate Smernice za pisanje članka div> center> body> html>>>

Izhod:

ezgifcom-video-to-gif-(13)

Izhod