[js][css] przewijanie zmodyfikowanego selecta Opcje

[KCG]

Zrobiłem nietypowe selecty, tylko pojawił sie problem, gdyż list jest bardzo długa i nie wygląda to ładnie: http://motocykl.cc/gielda.php (pierwsza lista).
Myślę nad jakimś przewijaniem, np. coś takiego, jak jest w menu start, gdy lista się nie mieści na ekranie.
Tutaj kod js i CSS:

Kod

     function selectReplacement(obj) {
       obj.className += ' replaced';
       var ul = document.createElement('ul');
       ul.className = 'selectReplacement';
       var opts = obj.options;
       var selectedOpt = (!obj.selectedIndex) ? 0 : obj.selectedIndex;
       for (var i=0; i<opts.length; i++) {
         var li = document.createElement('li');
         var txt = document.createTextNode(opts[i].text);
         li.appendChild(txt);
         li.selIndex = i;
         li.selectID = obj.id;
         li.onclick = function() {
           selectMe(this);
         };
         if (i == selectedOpt) {
           li.className = 'selected';
           li.onclick = function() {
             this.parentNode.className += ' selectOpen';
             this.onclick = function() {
               selectMe(this);
             };
           };
         }
         if (window.attachEvent) {
           li.onmouseover = function() {
             this.className += ' hover';
           };
           li.onmouseout = function() {
             this.className =
               this.className.replace(new RegExp(" hover\\b"), '');
           };
         }
         ul.appendChild(li);
       }
       obj.onfocus = function() {
         ul.className += ' selectFocused';
       };
       obj.onblur = function() {
         ul.className = 'selectReplacement';
       };
       obj.onchange = function() {
         var idx = this.selectedIndex;
         selectMe(ul.childNodes[idx]);
       };
       obj.onkeypress = obj.onchange;
       obj.parentNode.insertBefore(ul,obj);
     }
     function selectMe(obj) {
       var lis = obj.parentNode.getElementsByTagName('li');
       for (var i=0; i<lis.length; i++) {
         if (lis[i] != obj) {
           lis[i].className='';
           lis[i].onclick = function() {
             selectMe(this);
           };
        } else {
           setVal(obj.selectID, obj.selIndex);
           obj.className='selected';
           obj.parentNode.className =
             obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
           obj.onclick = function() {
             obj.parentNode.className += ' selectOpen';
             this.onclick = function() {
               selectMe(this);
             };
           };
         }
       }
     }
     function setVal(objID,val) {
       var obj = document.getElementById(objID);
       obj.selectedIndex = val;
     }
     function getElementsByClassName(cn){
         var arr = new Array();
         var els = document.getElementsByTagName("*");
           var exp= new RegExp("^(.* )?"+cn+"( .*)?$", "g");
           for (var i = 0; i < els.length; i++ ){
            if (exp.test(els[i].className)){
               arr.push(els[i]);
            }
         }
       return arr;
     }
     function setForm() {
       var s = getElementsByClassName('select_gielda');
       for (var i=0; i<s.length; i++) {
         selectReplacement(s[i]);
       }
     }
     window.onload = function() {
       (document.all && !window.print) ? null : setForm();
     };
<!-- i CSS -->
#sort_gielda select {
     display: block;
     margin: 0 10px 10px 0;
     width: 107px;
     float: left;
}
#sort_gielda select.replaced {
     width: 1px;
     position: absolute;
     left: -999em;
}
ul.selectReplacement {
     background-color: #ddd;
     border: 2px solid #404040;
     margin: 0 10px 10px 0;
     padding: 0;
     height: 21px;
     width: 107px;
     position: relative;
     z-index: 1000;
     float: left;
}
ul.selectFocused {
     background-color: #ddd;
}
ul.selectReplacement li {
     background: url(images/gielda/v.gif) center right no-repeat;
     background-color: #ddd;
     color: #404040;
     cursor: pointer;
     display: none;
     font-size: 11px;
     line-height: 1.7em;
     list-style: none;
     margin: 0;
     padding: 1px 12px;
     width: 83px;
}
ul.selectOpen li {
     background-image: none;
     display: block;
}
ul.selectReplacement li.selected {
     background-color: #ddd;
     color: #404040;
     display: block;
}
ul.selectOpen li.selected {
     background-color: #404040;
     color: #ddd;
     border: 0;
     display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
     background-color: #404040;
     color: #ddd;
}

jak się za to zabrać?

pzdr

[Black-Berry]

Sory ale mógłbyć się lepiej wyrazić o co Ci chodzi?

[KCG]

Chciałbym, aby lista była przewijana, bo jej wysokość jest większa od całej wysokości strony.
Np. 10 pozycji, a ostatnia to tak strzałka w dół i jak na nią najedziesz to lista się przewija. No i na górze listy to samo.

pzdr

Żadnych sugestii?

[Black-Berry]

Proponuję takie coś:
http://sorgalla.com/jcarousel/

A tu masz przykład na jednej stronie którą ostatnio robiłem. To nie muszą być foty. Mogą być twoje newsy:

http://www.wnetrzaikrajobraz.pl/content2.p...mp;type=article