EL HTML

Dado que vamos a montar un desplegable, simplemente vamos a crear un campo de select como este:

<select id="ui_element">
<option value="A" selected="">Option Item A</option>
<option value="B">Option Item B</option>
<option value="C">Option Item C</option>
<option value="D">Option Item D</option>
<option value="E">Option Item E</option>
<option value="F">Option Item F</option>
<option value="G">Option Item G</option>
<option value="H">Option Item H</option>
<option value="I">Option Item I</option>
<option value="J">Option Item J</option>
</select>

En este código poco hay que explicar, es un simple combo de un formulario al que le hemos asignado una serie de valores.

Crear Combo scrollable

En este caso hemos utilizado un plugin que nos permite crear de una forma sencilla este efecto. Este es el código correspondiente al plugin.

(function($) {
	$.fn.scrollablecombo = function(options) {
		var opts = $.extend({}, $.fn.scrollablecombo.defaults, options);
		return this.each(function() {
			$this = $(this);
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
			
			function findHighestZIndex(){
				var divs = document.getElementsByTagName('div');
				var highest = 0;
				for (var i = 0; i < divs .length; i++)
				{
					var zindex = divs[i].style.zIndex;
					if (zindex > highest) {
						highest = zindex;
					}
				}
				return highest;
			}

			/** 
			* hide the select element
			* graceful degradation
			*/
			$this.hide();
			
			function makeScrollable($wrapper, $container){
				var extra 			= 50;
				var wrapperHeight 	= $wrapper.height() ;
				$wrapper.css({overflow: 'hidden'});
				$wrapper.scrollTop(0);
				$wrapper.unbind('mousemove').bind('mousemove',function(e){
					var ulHeight 	= $container.outerHeight() + 2*extra ;
					var top 		= (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
					$wrapper.scrollTop(top);
				});
			}
			
			/**
			* let's build our element structure
			*/
			var $ul_e 	= $('<ul />');
			
			$this.find('option').each(function(){
				var $option = $(this);
				var liclass = '';
				if($option.attr('selected'))
					liclass = 'selected';
				var $li_e 	= $('<li />',{
					className	:	liclass,
					html		:	'<a href="'+$option.val()+'">'+$option.html()+'</a>'
				});
				$ul_e.append($li_e);
			});
			
			var $wrapper_e 	= $('<div />',{
				className	:	'cb_selectWrapper'
			});
			
			$wrapper_e.append($ul_e);
			
			var $control_e 	= $('<div />',{
				//id			:	'ui_element',
				className	:	'cb_selectMain cb_down'
			});
			
			var $select_e 	= $('<div />',{
				className	:	'cb_select'
			});
			
			$select_e.append($wrapper_e).append($control_e);
			
			var $selected	= $ul_e.find('.selected');
			
			
			function openCombo(){
				var maxzidx = Math.max(findHighestZIndex(),99999);
				$wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
				$control_e.addClass('cb_up').removeClass('cb_down');
				makeScrollable($wrapper_e,$ul_e);
			}
			function closeCombo(){
				$wrapper_e.css('z-index',1000).hide();
				$control_e.addClass('cb_down').removeClass('cb_up');
			}
			$control_e.html($selected.find('a').html())
					  .bind('click',function(){
						  (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
					  }
			);
			$selected.hide();
			
			$this.parent().append($select_e);
			$this.remove();
			
			$ul_e.find('a').bind('click',function(e){
				var $this 		= $(this);
				$control_e.html($this.html());
				var $selected	= $ul_e.find('.selected');
				$selected.show().removeClass('selected');
				$this.parent().addClass('selected').hide();
				closeCombo();
				e.preventDefault();
			});
		});
	};
	$.fn.scrollablecombo.defaults = {
	};
})(jQuery);

Para utilizar el plguin simplemente vamos a utilizar un selector de jQuery e indicarle que lo utilice:

$(function() {
        $('#ui_element').scrollablecombo();
      });

Ya tenemos nuestro combo listo para funcionar, podemos hacer que tenga un mejor aspecto incorporando un skin adicional.

EL CSS

Para este ejemplo hemos utilizado este skin CSS

.cb_select{
  width:200px;
  float:left;
  clear:both;
  position:relative;
  margin:30px 5px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size:12px;
  text-transform:uppercase;
}
.cb_select .cb_selectMain{
  color:#777;
  border:2px solid #ddd;
  background-color:#f0f0f0;
  background-repeat:no-repeat;
  background-position:95% 50%;
  cursor:pointer;
  text-align:left;
  height:20px;
  line-height:20px;
  text-indent:10px;
  width:200px;
  position:absolute;
  top:0px;
  left:0px;
  z-index:10;
  text-shadow:1px 1px 1px #fff;
  -moz-box-shadow:0px 0px 2px #333 inset;
  -webkit-box-shadow:0px 0px 2px #333 inset;
  box-shadow:0px 0px 2px #333 inset;
}
.cb_down{
  background-image:url(down.png);
}
.cb_up{
  background-image:url(up.png);
}
.cb_selectWrapper{
  width:200px;
  display:none;
  position:absolute;
  top:0px;
  left:0px;
  z-index:1000;
  height:150px;
  border:2px solid #ddd;
  background-color:#fff;
  margin:22px 0px 0px 0px;
  background:#f0f0f0 url(overlay.png) repeat-x top left;
  -moz-box-shadow:0px 0px 2px #333 inset;
  -webkit-box-shadow:0px 0px 2px #333 inset;
  box-shadow:0px 0px 2px #333 inset;
}
.cb_selectWrapper ul {
  list-style:none;
  padding:0px;
  margin:0px;
  width:100%;
}
.cb_selectWrapper ul li a{
  text-decoration:none;
  cursor:pointer;
  display:block;
  padding:3px 0px;
  text-indent:10px;
  letter-spacing:1px;
  color:#777;
  text-shadow:1px 1px 1px #fff;
}
.cb_selectWrapper ul li a:hover{
  background-color:#616161;
  color:#fff;
  text-shadow:1px 1px 1px #000;
}
Puedes ver un ejemplo de este mismo combo funcionando STAND ALONE DEMO