<div style="overflow:auto">

just save bellow code with html extention and see the result.

<html>
<body >
<head>
<script language="javascript">
//On scrolling of DIV tag.
function OnDivScroll()
{
	var lstCollegeNames = document.getElementById("lstCollegeNames");

	//The following archives two things while scrolling
	//a) On horizontal scrolling: To avoid vertical scroll bar in select box when the size of 
	// the selectbox is 8 and the count of items in selectbox is greater than 8.
	//b) On vertical scrolling: To view all the items in selectbox
	
	//Check if items in selectbox is greater than 8, if so then making the size of the selectbox to count of
	//items in selectbox,so that vertival scrollbar won't appear in selectbox
	if (lstCollegeNames.options.length > 8)
	{
		lstCollegeNames.size=lstCollegeNames.options.length;
	}
	else
	{
		lstCollegeNames.size=8;	
	}	
}

	//On focus of Selectbox
	function OnSelectFocus()
	{
		
		//On focus of Selectbox, making scroll position of DIV to very left i.e 0 if it is not. The reason behind
		//is, in this scenario we are fixing the size of Selectbox to 8 and if the size of items in Selecbox is greater than 8 
		//and to implement downarrow key and uparrow key functionality, the vertical scrollbar in selectbox will
		//be visible if the horizontal scrollbar of DIV is exremely right.
		if (document.getElementById("divCollegeNames").scrollLeft != 0)
		{
			document.getElementById("divCollegeNames").scrollLeft = 0;
		}


		var lstCollegeNames = document.getElementById('lstCollegeNames');
		//Checks if count of items in Selectbox is greater than 8, if yes then making the size of the selectbox to 8.
		//So that on pressing of downarrow key or uparrowkey, the selected item should also scroll up or down as expected.
		if( lstCollegeNames.options.length > 8)
		{
			lstCollegeNames.focus();
			lstCollegeNames.size=8;
		}
} 
</script>
</head>

<div id="divCollegeNames" style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px" onscroll="OnDivScroll();">
<SELECT id="lstCollegeNames" size="8" multiple onfocus="OnSelectFocus();">
<OPTION>St. Xavier's College, Ahmedabad</OPTION>
<OPTION>St. Joseph's College, Bangalore</OPTION>
<OPTION>St. Xavier's College, Mumbai</OPTION>
<OPTION>Sacred Heart College, Thevara, Ernakulam, Kerala</OPTION>
<OPTION>Research Foundation for Science, Technology and Natural Resource Policy, Bangalore</OPTION>
<OPTION>Jawaharlal Nehru University (JNU), New Delhi</OPTION>
<OPTION>ISRO Telemetry Tracking Command Network (ISTRAC),Bangalore</OPTION>
<OPTION>Defence Electronics Research Laboratory, Hyderabad</OPTION>
<OPTION>All-India Institute of Medical Sciences (AIIMS), Delhi</OPTION>
<OPTION>Indian Institue of Management, Ahmedabad</OPTION>
</SELECT>
</div>
</body>
</html>

Edited by WingedPanther, 20 June 2008 - 08:08 AM.
add code tags