Как сделать выпадающее меню с вертикальной полосой прокрутки?

Question

Привет мне нужно поставить вертикальную полосу прокрутки в раскрывающемся меню, так что сначала он будет отображаться только размер = 1, но когда мы опускаемся, у него должна быть вертикальная полоса прокрутки, кто-нибудь может мне помочь, я был бы очень признателен за любую помощь

Answer 1

Если вы используете html-выпадающий список, предложил Натриум, вы можете установить атрибут «размер» тега select, чтобы указать, сколько строк вы хотите показать. Так что, если - в его примере - вы установите размер 3, у вас будет выпадающее меню высотой в 3 строки и полоса прокрутки, прикрепленная для прокрутки до оставшихся 3 элементов.

Если вы имеете в виду что-то с помощью CSS, скажем, вы отображаете выпадающее меню в теге div, вы можете использовать что-то вроде этого:

<div style="height:200px; overflow-y:scroll">...</div>

Это дает вам div с абсолютной высотой. Если содержимое div становится слишком большим, автоматически отображается вертикальная полоса прокрутки.

Answer 2

Если вы хотите, чтобы заставила полосу прокрутки быть всегда видимой, вы просто не сможете сделать это с помощью нативного выпадающего списка. Видимость полосы прокрутки в собственном элементе управления зависит от количества записей в раскрывающемся списке, и между браузерами также существуют различия в том, как они обрабатывают элемент управления. Например, IE6 и IE7, кажется, показывают полосу прокрутки, только когда число элементов превышает 30, тогда как FF3 и Chrome показывают полосу прокрутки, когда количество элементов превышает 20.

Если вы действительно, действительно хотите всегда получать полосу прокрутки, вам придется использовать не нативную реализацию, такую ​​как jQuery FlexBox .

Answer 3

это не просто html-выпадающий список, который вам нужен?

<select name="cars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="fiat">Fiat</option>
   <option value="audi">Audi</option>
   <option value="volkswagen">Volkswagen</option>
   <option value="bmw">Bmw</option>
</select>