Mam pole listy z wieloma przedmiotami, z których niektóre mają długie etykiety. Dlatego muszę przewijać poziomo i pionowo.Przewijanie poziome w HTML ListBox (bez kontenera)?
Próbowałem umieścić pole listy w dziale div i stosując stylizację przepełnienia do obu, ale to ma problem. Poziome przewijanie div powoduje przewijanie samego pola listy, a nie zawartości. Na przykład, gdy przewijam, widzę krawędź pola listy z jego paskiem przewijania. Który wywołuje drugi problem; Muszę przewijać w poziomie, aby przejść do pionowego paska przewijania pola listy, ponieważ pionowy pasek przewijania div (jeśli jest obecny) przesuwa się po polu listy, a nie jego zawartość.
Aby zorientować się, o czym mówię, try this jsFiddle in FireFox or IE (Chrome działa bez zarzutu).
Oto kod:
div {
height: 100px;
width: 300px;
overflow: auto;
}
select {
height: 200px;
overflow: visible;
}
<div>
<select multiple>
<option>1 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>2 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>3 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>4 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>5 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>6 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>7 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>8 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>9 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>10 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>11 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>12 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>13 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>14 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>15 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>16 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>17 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>18 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>19 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>20 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
<option>21 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
</select>
</div>
Czy istnieje sposób, aby uzyskać paski przewijania poziomego i pionowego na polu listy, które działają na zawartość pudełka lista, i że działa w Chrome IE (nie martw się o starsze wersje), FireFox i Safari?
co wynik, jeśli umieścić 'overflow: -moz-przewijania-poziomy; overflow-x: auto; w twoim div? – ichadhr
@ichadhr samo na obu IE i FireFox –