如何让Div滚动条滚的慢一点儿??

把滚动条去掉可以么
document.getElementById('zac').style.overflow='hidden';

<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
function foo(oInput){
    if( window.event.keyCode == 40 ){
        var nextInput = oInput.nextSibling.nextSibling;
        if( nextInput ){
            oInput.className = "zac_inactiveOption";
            nextInput.className = "zac_activeOption";
            nextInput.focus();
        }
    }else if( window.event.keyCode == 38 ){
        var prevInput;
        var prevBr = oInput.previousSibling;
        if( prevBr ) prevInput = prevBr.previousSibling;
        if( prevInput ){
            oInput.className = "zac_inactiveOption";
            prevInput.className = "zac_activeOption";
            prevInput.focus();
        }
    }
}
</script>
</head>
<body onLoad="">
<div class="zac_container">
    <input id="aofei" type="text" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
    <input type="text" value="傲菲2" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲3" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲4" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲5" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲6" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲7" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲8" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲9" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲10" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲11" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲12" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲13" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲14" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲15" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲16" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲17" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲18" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲19" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲20" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
</div>
<script language="javascript">
document.attachEvent("onclick", function(){document.getElementById("aofei").focus();});
</script>
</body>
</html>这样可不可以？

<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
function foo(oInput){
    if( window.event.keyCode == 40 ){
        var nextInput = oInput.nextSibling.nextSibling;
        if( nextInput ){
            oInput.className = "zac_inactiveOption";
            nextInput.className = "zac_activeOption";
            nextInput.focus();
        }
document.getElementById('iDiv').scrollTop-=2;//看这样行不？
    }else if( window.event.keyCode == 38 ){
        var prevInput;
        var prevBr = oInput.previousSibling;
        if( prevBr ) prevInput = prevBr.previousSibling;
        if( prevInput ){
            oInput.className = "zac_inactiveOption";
            prevInput.className = "zac_activeOption";
            prevInput.focus();
        }
    }
}
</script>
</head>
<body onLoad="">
<div class="zac_container" id="iDiv">
    <input id="aofei" type="text" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
    <input type="text" value="傲菲2" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲3" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲4" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲5" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲6" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲7" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲8" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲9" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲10" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲11" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲12" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲13" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲14" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲15" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲16" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲17" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲18" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲19" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲20" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
</div>
<script language="javascript">
document.attachEvent("onclick", function(){document.getElementById("aofei").focus();});
</script>
</body>
</html>

<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
function foo(oInput){
    if( window.event.keyCode == 40 ){
        var nextInput = oInput.nextSibling.nextSibling;
        if( nextInput ){
            oInput.className = "zac_inactiveOption";
            nextInput.className = "zac_activeOption";
            nextInput.focus();
        }
//document.getElementById('iDiv').scrollTop-=0.8;
    }else if( window.event.keyCode == 38 ){
        var prevInput;
        var prevBr = oInput.previousSibling;
        if( prevBr ) prevInput = prevBr.previousSibling;
        if( prevInput ){
            oInput.className = "zac_inactiveOption";
            prevInput.className = "zac_activeOption";
            prevInput.focus();
        }
    }
}
</script>
</head>
<body onLoad="">
<div class="zac_container" id="iDiv">
    <input id="aofei" type="text" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
    <input type="text" value="傲菲2" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲3" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲4" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲5" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲6" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲7" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲8" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲9" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲10" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲11" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲12" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲13" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲14" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲15" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲16" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲17" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲18" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲19" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲20" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
</div>
<script language="javascript">
document.attachEvent("onclick", function(){document.getElementById("aofei").focus();});
</script>
</body>
</html>

实际上这是一个AutoComplete的下拉列表的控制。直接用Select的话，太丑陋了。我看过微软做的AutoComplete的实现，他实现的很好，但是代码太多，我懒的看。 ComponentArt的实现是不监控键盘事件的。我想做到微软的那个样子。

6楼的不行。因为你的scrollTop -= 的动作是发生在系统scroll滚动之前的！！！所以当我从外界第一步进入到div时，选中“傲菲1”，这是虽然你把scrollTop减到负，但是它会自动归0. 然后再进行系统的scroll动作，这是的效果就是"傲菲1"被遮住了！！！！

改一下css即可,把overflow: auto改成overflow: scroll
.zac_container
{
    height: 200px;
    width:400px;
    margin: 0px;
    padding: 0px;
    border: 1px solid #000000;
    overflow: scroll;
}

改成这个之后，左右scrollbar都出现了。不可行。

<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
  var i=0;
function foo(oInput){
  var   obj=document.all.dd
    if( window.event.keyCode == 40 ){
i=i+1
        var nextInput = oInput.nextSibling.nextSibling;
        if( nextInput ){
            oInput.className = "zac_inactiveOption";
            nextInput.className = "zac_activeOption";
            nextInput.focus();
        }
if(i>9){
obj.scrollTop=obj.scrollTop+1
}
else{obj.scrollTop=0}

    }else if( window.event.keyCode == 38 ){
i=i+1
        var prevInput;
        var prevBr = oInput.previousSibling;
        if( prevBr ) prevInput = prevBr.previousSibling;
        if( prevInput ){
            oInput.className = "zac_inactiveOption";
            prevInput.className = "zac_activeOption";
            prevInput.focus();
        }
    }
if(i>9){
obj.scrollTop=obj.scrollTop+1
}
else{obj.scrollTop=0}
}
</script>
</head>
<body onLoad="">
<div class="zac_container" id="dd">
    <input id="aofei" type="text" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
    <input type="text" value="傲菲2" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲3" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲4" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲5" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲6" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲7" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲8" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲9" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲10" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲11" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲12" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲13" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲14" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲15" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲16" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲17" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲18" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲19" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲20" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
</div>
<script language="javascript">
document.attachEvent("onclick", function(){document.getElementById("aofei").focus();});
</script>
</body>
</html>
自己去测试，看看可行没

不管你的scrollTop怎么设置，这个设置的过程都是在系统scroll之后发生的。
第一次进入Div时，焦点聚焦到第一个时，会触发scroll，第一个还是被遮住！

从一个div之外的textBox进入div是通过按down键进入的，所以这个按键会触发下拉事件。
而此时你就算将scrollTop归0,他还是会下拉。必须找到在系统scroll动作之后的切入点。如果仅仅是进入div之后的上下控制是很容易的，关键是如何处理从外面第一次进入div时的下拉事件?
你的切入点是在系统scroll之前的，必须在系统scroll之后切入才可以。

我测试可行的，至于你说的在系统scroll之后切入，可以再加一个j来控制，如以下：
<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
  var i=0;
  var j=0;
function foo(oInput){
  var   obj=document.all.dd
    if( window.event.keyCode == 40 ){
if(j!=0){
i=i+1}
        var nextInput = oInput.nextSibling.nextSibling;
        if( nextInput ){
            oInput.className = "zac_inactiveOption";
            nextInput.className = "zac_activeOption";
            nextInput.focus();
j=j+1;
        }
if(i>9){
obj.scrollTopPos=obj.scrollTopPos+2
}
else{obj.scrollTopPos=0}

    }else if( window.event.keyCode == 38 ){
i=i+1
        var prevInput;
        var prevBr = oInput.previousSibling;
        if( prevBr ) prevInput = prevBr.previousSibling;
        if( prevInput ){
            oInput.className = "zac_inactiveOption";
            prevInput.className = "zac_activeOption";
            prevInput.focus();
        }
    }
if(i>9){
obj.scrollTopPos=obj.scrollTopPos+1
}
else{obj.scrollTopPos=0}
}
</script>
</head>
<body onLoad="">
<div class="zac_container" id="dd">
    <input id="aofei" type="text" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
    <input type="text" value="傲菲2" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲3" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲4" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲5" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲6" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲7" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲8" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲9" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲10" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲11" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲12" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲13" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲14" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲15" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲16" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲17" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲18" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲19" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲20" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
</div>
<script language="javascript">
document.attachEvent("onclick", function(){document.getElementById("aofei").focus();});
</script>
</body>
</html>

<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
function $(id)
{
return document.getElementById(id);
}
function foo(oInput){
    if( window.event.keyCode == 40 ){
        var nextInput = oInput.nextSibling.nextSibling;
        if( nextInput ){
            oInput.className = "zac_inactiveOption";
            nextInput.className = "zac_activeOption";
            nextInput.focus();
   var percent=parseFloat(parseInt(oInput.name.replace("aofie","")-1)/$("div1").getElementsByTagName("input").length);
   $("div1").scrollTop=parseInt(document.getElementById("div1").scrollHeight*percent);
        }
    }else if( window.event.keyCode == 38 ){
        var prevInput;
        var prevBr = oInput.previousSibling;
        if( prevBr ) prevInput = prevBr.previousSibling;
        if( prevInput ){
            oInput.className = "zac_inactiveOption";
            prevInput.className = "zac_activeOption";
            prevInput.focus();
        }
    }
}
</script>
</head>
<body onLoad="">
<div id="div1" class="zac_container">
    <input name="aofie1" id="aofei" type="text" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
    <input name="aofie2" type="text" value="傲菲2" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie3" type="text" value="傲菲3" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie4" type="text" value="傲菲4" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie5" type="text" value="傲菲5" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input name="aofie6" type="text" value="傲菲6" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie7" type="text" value="傲菲7" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie8" type="text" value="傲菲8" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie9" type="text" value="傲菲9" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie10" type="text" value="傲菲10" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input name="aofie11" type="text" value="傲菲11" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie12" type="text" value="傲菲12" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie13" type="text" value="傲菲13" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie14" type="text" value="傲菲14" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie15" type="text" value="傲菲15" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input name="aofie16" type="text" value="傲菲16" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie17" type="text" value="傲菲17" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie18" type="text" value="傲菲18" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie19" type="text" value="傲菲19" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input name="aofie20" type="text" value="傲菲20" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
</div>
<script language="javascript">
document.attachEvent("onclick", function(){document.getElementById("aofei").focus();});
</script>
</body>
</html>这样就行了，用百分比来计算

<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
function foo(oInput){
if( window.event.keyCode == 40 ){
var nextInput = oInput.nextSibling.nextSibling;
if( nextInput ){
oInput.className = "zac_inactiveOption";
nextInput.className = "zac_activeOption";
nextInput.focus();
}
}else if( window.event.keyCode == 38 ){
var prevInput;
var prevBr = oInput.previousSibling;
if( prevBr ) prevInput = prevBr.previousSibling;
if( prevInput ){
oInput.className = "zac_inactiveOption";
prevInput.className = "zac_activeOption";
prevInput.focus();
}
}
}
function foo2(){
if( window.event.keyCode == 40 ){
var aofei1 = document.getElementById("aofei1");
if( aofei1 ){
aofei1.className = "zac_activeOption";
aofei1.focus();
}
}
}
</script>
</head>
<body>
<input type="text" id="aofei" onKeyDown="foo2()" />
<div id="prompt" class="zac_container">
    <input type="text" id="aofei1" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
    <input type="text" value="傲菲2" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲3" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
<input type="text" value="傲菲4" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲5" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
<input type="text" value="傲菲6" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲7" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲8" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
<input type="text" value="傲菲9" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲10" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
<input type="text" value="傲菲11" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲12" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲13" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
<input type="text" value="傲菲14" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲15" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
<input type="text" value="傲菲16" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲17" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲18" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
<input type="text" value="傲菲19" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲20" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
</div>
<script language="javascript">
document.attachEvent("onclick", function(){document.getElementById("aofei").focus();});
document.getElementById("aofei").click();
</script>
</body>
</html>只要能让这段代码，在第一次按下down按键时，傲菲1变红，同时傲菲1可视，就给分。这个评分标准非常明确。

微软的AutoComplete啊。http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx你在框里面输入xyzn然后等阵就看到下拉列表了，然后你按down，进入到下拉列表，他的滚动条不滚动

告诉你解决方法：
<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
function foo(oInput){
    if( window.event.keyCode == 40 ){
        var nextInput = oInput.nextSibling.nextSibling;
        if( nextInput ){
            oInput.className = "zac_inactiveOption";
            nextInput.className = "zac_activeOption";
            nextInput.focus();
        }
    }else if( window.event.keyCode == 38 ){
        var prevInput;
        var prevBr = oInput.previousSibling;
        if( prevBr ) prevInput = prevBr.previousSibling;
        if( prevInput ){
            oInput.className = "zac_inactiveOption";
            prevInput.className = "zac_activeOption";
            prevInput.focus();
        }
    }
}
function foo2(){
      if(window.event.keyCode==40){event.returnValue=false}
        var aofei1 = document.getElementById("aofei1");
        if( aofei1 ){
            aofei1.className = "zac_activeOption";
            aofei1.focus();
        }
}
</script>
</head>
<body>
<input type="text" id="aofei" onKeyDown="foo2()" />
<div id="prompt" class="zac_container">
    <input type="text" id="aofei1" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
    <input type="text" value="傲菲2" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲3" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲4" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲5" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲6" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲7" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲8" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲9" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲10" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲11" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲12" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲13" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲14" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲15" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲16" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲17" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲18" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲19" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲20" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
</div>
<script language="javascript">
document.attachEvent("onclick", function(){document.getElementById("aofei").focus();});
document.getElementById("aofei").click();
</script>
</body>
</html>

回家来仔细看了你的代码，果然是我跟你说的
function foo2(){
      if(window.event.keyCode==40){
        var aofei1 = document.getElementById("aofei1");
        if( aofei1 ){
            aofei1.className = "zac_activeOption";
            aofei1.focus();
        }
}
}
这个函数再作怪
我只再你的基础上改了这个函数

我再改进一下，就和你给你的网址的效果一模一样了
<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
var i=0;
function foo(oInput){
    if( window.event.keyCode == 40 ){
if(i<10){event.returnValue=false}
        var nextInput = oInput.nextSibling.nextSibling;
        if( nextInput ){
            oInput.className = "zac_inactiveOption";
            nextInput.className = "zac_activeOption";
            nextInput.focus();
i=i+1
        }
    }else if( window.event.keyCode == 38 ){
if(i<10){event.returnValue=false}
        var prevInput;
        var prevBr = oInput.previousSibling;
        if( prevBr ) prevInput = prevBr.previousSibling;
        if( prevInput ){
            oInput.className = "zac_inactiveOption";
            prevInput.className = "zac_activeOption";
            prevInput.focus();
i=i+1
        }
    }
}
function foo2(){
      if(window.event.keyCode==40){event.returnValue=false}
        var aofei1 = document.getElementById("aofei1");
        if( aofei1 ){
            aofei1.className = "zac_activeOption";
            aofei1.focus();
        }
}
</script>
</head>
<body>
<input type="text" id="aofei" onKeyDown="foo2()" />
<div id="prompt" class="zac_container">
    <input type="text" id="aofei1" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
    <input type="text" value="傲菲2" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲3" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲4" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲5" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲6" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲7" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲8" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲9" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲10" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲11" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲12" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲13" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲14" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲15" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
     <input type="text" value="傲菲16" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲17" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲18" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲19" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
    <input type="text" value="傲菲20" onkeydown="foo(this);" readOnly class="zac_inactiveOption"><br>
</div>
<script language="javascript">
document.attachEvent("onclick", function(){document.getElementById("aofei").focus();});
document.getElementById("aofei").click();
</script>
</body>
</html>

因为家里没装FF无法测试FF的
你在这基础上改兼容FF的就可以了
IE上是正确没错的了

非常好。你的这个办法我也想到过。但是我是在Div的onScroll事件做的。我试了：
event.cancelBubble = false;
和event.returnValue = false;都不行，最后我去查一下，才发现onScroll事件是不能cancel的，就没去试了。你是直接在input里面就让事件不再向上冒泡了，很不错。

<html>
<head>
<style type="text/css">
#list
{
left:100px;
top:100px;
position:absolute;
height:252px;
width:200px;
border-style:solid;
border-width:1px;
border-color:#c0c0c0;
overflow:auto;
}
</style>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
} function initListData()
{
var list={};
list.startPosition=1;
list.endPosition=10;
list.totalDataCount=20;
list.displayCount=10;

var oDiv=new Array();
for(var i=0;i<=list.totalDataCount;i++)
{
oDiv[i]=document.createElement("div");
oDiv[i].style.height="25px";
oDiv[i].style.paddingLeft="5px";
oDiv[i].style.paddingTop="5px";
oDiv[i].innerText="ListData"+i;
$("list").appendChild(oDiv[i]);
}
oDiv[0].style.display="none";
$("list").onkeydown=function(){return false;};

var currentData={};
currentData.row=0;
currentData.entity=oDiv[currentData.row]; document.onkeydown=selectData;
function selectData()
{
var percent=1/list.totalDataCount;

setHighlight(currentData.entity,false); if(event.keyCode==40)
{
if(currentData.row<list.totalDataCount)
{
currentData.row++;
if(currentData.row>list.endPosition)
{
$("list").scrollTop+=$("list").scrollHeight*percent;
list.startPosition++;
list.endPosition++;
}
}
}
if(event.keyCode==38)
{
if(currentData.row>1)
{
currentData.row--;
if(currentData.row<list.startPosition)
{
$("list").scrollTop-=$("list").scrollHeight*percent;
list.startPosition--;
list.endPosition--;
}
}
}
currentData.entity=oDiv[currentData.row];
setHighlight(currentData.entity,true);
}
} function setHighlight(obj,state)
{
obj.style.backgroundColor=state?"#FEF7CD":"";
}
</script>
</head>
<body onload="initListData()">
<div id="list"></div>
</body>
</html>
这个就是你要的效果

调试易

如何让Div滚动条滚的慢一点儿??

解决方案 »