Kuckt eng Këscht mat scrollen Text mat CSS an HTML
Eng HTML- Scrollbox ass e Këscht deen d'Scrollbalken op der rietser Säit an der Uewerfläch ergéift, wann d'Inhalter vun der Këscht méi grouss sinn wéi d'Këschtmaart. An anere Wierder, wann Dir e Këscht hutt, deen ongeféier 50 Wierder kann passen, an Dir hutt Text vun 200 Worte, en HTML-Scroll-Box astellt Brochstéckelen fir ze liesen Iech déi extra 150 Wierder ze gesinn. Am Standard HTML deen den Text extra aus der Këscht dréckt.
HTML-Scrollen ze maachen zimlech einfach. Dir braucht just d'Breet an d'Héicht vum Element wou Dir wëllt scrollen an dann d' CSS- Iwwerstroum-Eegent benotze fir ze setzen wéi Dir wëllt de Scrollen opmaachen.
Wat maache mat extra Text?
Wann Dir méi Text als am Raum op Ärem Layout passt, hutt Dir e puer Optiounen:
- Rewrite de Text esou datt et méi kuerz ass an passeiert.
- Erlaabt de Text iwwer d'Grenze hinaus ze fléien an hoffen datt de Layout ka flexéieren ze ënnerstëtzen.
- Kuckt de Text aus wéi et iwwerflëssert.
- Scrollbaren (normalerweise vertikal fir Text) féieren, fir datt de Raum woubäi de extra Text ze weisen.
Déi bescht Alternativ ass typesch déi lescht Optioun: Eroplueden e Scrolltext. Dann kann extra Text nach ëmmer gelies ginn, awer Äre Design ass net kompromittéiert.
HTML an CSS fir dat wier:
Den Iwwerfléi: Auto; seet den Browser fir Scrollbaren ze addéieren, wann se gebraucht ginn fir de Text ze bewegen vun der Grenze vum Div. Awer fir dëst ze schaffen, brauchs de och d'Breet- an Héichte Stilimmkeeten déi op der Div opgesat ginn, fir datt et Grenze gëtt fir ze iwwerflëssegen.
Dir kënnt och den Text ausschneiden andeems de Iwwerfluss geännert gëtt: auto; ze iwwerhalen: verstoppte ;. Wann Dir d'Iwwerstroumegkeet verloosst, de Text iwwer d'Grenze vum Div divuléiert.
Dir kënnt Scrollbarren méi wéi just Text setzen
Wann Dir e grousst Bild, deen Dir wëllt op enger klenger Plaz erreechen, kënnt Dir esou roueg bliwwen wéi Dir mat Text.
An dësem Beispill ass d'Bild 400x509 an engem 300x300 Paragraph.
Tabel Ka profitéieren aus Scroll Bars
Laang Tabellen vun Informatioun kënnen ganz schwéier schwéier ze liesen, awer andeems se se an enger Divisioun of enger begrenzter Gréisst setzen an dann d'Iwwerstroum-Eegiel addéieren, kënnt Dir Tabellen mat vill Daten erstallt hunn, déi net an ärem Raum op der Säit sinn .
Déi einfachst Manéier ass genee wéi mat Biller an Text, addéiere just eng Div uewen um Dësch, setzen d'Breet an d'Héicht vun der Div an, a addt d'Iwwerstroummeräich:
| Telefon | 502-5366 Eppes wat passéiert wann Dir dëst eng horizontal scrollbar Bar gëtt normalerweis ersat, well de Browser ass ugeholl, datt de Chrom vum Scrollbalanc d'Tabell iwwerléisst. Et gi vill Manéiere fir dëst ze verbesseren fir d'Breet vum Dësch a fir anerer ze änneren. Awer meng Liiblings ass einfach ze horizontal scrollen mat der CSS 3 Eigenschaft Iwwerfluss-x. Just addflow-x: verstoppt; an den Div, an datt d'horizontal scrollbar Bar gëtt. Maacht sécher, dëst ze testen, well et vläicht Inhalter sinn, déi verschwënnt. Firefox Supports Den TBODY Tags fir den Iwwerfluss benotzenEng richteg Feature vum Firefox Browser ass datt Dir d'Iwwerfläch Eegeschafte op den internen Dëschtagnostypen wéi "tbody" oder "adad "oder" tfoot "benotzt. Dëst bedeit datt Dir Scrollbalken op den Inhaltsplang vun de Tabellen opgesteet an d'Headerzellen bleiwen uewen verankert. Dëst funktionéiert nëmme am Firefox , wat ass ze schlecht, awer et ass eng schéin Feature wann Är Lieser nëmme Firefox benotzen. Fëllt fir dëst Beispill am Firefox fir ze kucken wat ech mengen.
|
|---|