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

fly_miss 2008-05-30 04:19:18
我按down按钮，焦点下移一列，但是滚动条却滚动的不止一列。这样焦点所在的input就不在可视了。
我常识去控制div的onScroll，但是发现该事件是不能cancel的。

如何解决这个问题?200分求助。

备注：在Js版发了同样的问题，这边可以解决的话，可过去回答，可得400分。

<html>

<head>

<style type="text/css">

<!--

.zac_container

{

    height: 200px;

	width:400px;

    margin: 0px;

    padding: 0px;

    border: 1px solid #000000;

    overflow: auto;

}

.zac_inactiveOption{

	width:380px;

	height:20px;

	border: 0px none #FFFFFF;

	margin: 0px;

	padding: 0px;

}

.zac_activeOption {

	background-color: #FF0000;

	width:380px;

	height:20px;

	border: 0px none #FFFFFF;

	margin: 0px;

	padding: 0px;

}

-->

</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>
...全文
386 36 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
36 条回复
切换为时间正序
请发表友善的回复…
发表回复
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
-_-

我是被你开始那段代码误导了
回家来重新看你后来给的代码，思路也就理清楚了
fly_miss 2008-05-30
  • 打赏
  • 举报
 回复
非常好。

你的这个办法我也想到过。

但是我是在Div的onScroll事件做的。

我试了：
event.cancelBubble = false;
和event.returnValue = false;

都不行，最后我去查一下，才发现onScroll事件是不能cancel的，就没去试了。

你是直接在input里面就让事件不再向上冒泡了，很不错。
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
我再改进一下，就和你给你的网址的效果一模一样了
<html>

<head>

<style type="text/css">

<!--

.zac_container

{

    height: 200px;

    width:400px;

    margin: 0px;

    padding: 0px;

    border: 1px solid #000000;

    overflow: auto;

}

.zac_inactiveOption{

    width:380px;

    height:20px;

    border: 0px none #FFFFFF;

    margin: 0px;

    padding: 0px;

}

.zac_activeOption {

    background-color: #FF0000;

    width:380px;

    height:20px;

    border: 0px none #FFFFFF;

    margin: 0px;

    padding: 0px;

}

-->

</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>
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
回家来仔细看了你的代码，果然是我跟你说的
function foo2(){
if(window.event.keyCode==40){
var aofei1 = document.getElementById("aofei1");
if( aofei1 ){
aofei1.className = "zac_activeOption";
aofei1.focus();
}
}
}
这个函数再作怪
我只再你的基础上改了这个函数
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
呵呵，还好没人解决，好了，我就介绍方法告诉你了
<html>

<head>

<style type="text/css">

<!--

.zac_container

{

    height: 200px;

    width:400px;

    margin: 0px;

    padding: 0px;

    border: 1px solid #000000;

    overflow: auto;

}

.zac_inactiveOption{

    width:380px;

    height:20px;

    border: 0px none #FFFFFF;

    margin: 0px;

    padding: 0px;

}

.zac_activeOption {

    background-color: #FF0000;

    width:380px;

    height:20px;

    border: 0px none #FFFFFF;

    margin: 0px;

    padding: 0px;

}

-->

</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>
vicqqq 2008-05-30
  • 打赏
  • 举报
 回复
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();
}
//if(document.getElementById('aofei').focus) document.getElementById('aofei').blur(); 这句注释掉
oInput.scrollIntoView(true);
}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();
}
oInput.scrollIntoView(true);
}
vicqqq 2008-05-30
  • 打赏
  • 举报
 回复
<html>
<head>
<script type="text/javascript" src="http://sz.funeee.com/js/jquery.js"></script>
<style type="text/css">
<!--
.zac_container
{
height: 200px;
width:400px;
margin: 0px;
padding: 0px;
border: 1px solid #000000;
overflow: auto;
}
.zac_inactiveOption{
width:380px;
height:20px;
border: 0px none #FFFFFF;
margin: 0px;
padding: 0px;
}
.zac_activeOption {
background-color: #FF0000;
width:380px;
height:20px;
border: 0px none #FFFFFF;
margin: 0px;
padding: 0px;
}
-->
</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();
}
if(document.getElementById('aofei').focus) document.getElementById('aofei').blur();
oInput.scrollIntoView(true);
}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();
}
oInput.scrollIntoView(true);
}
}
</script>
</head>
<body onLoad="">
<div class="zac_container" onscroll="$('#aofei2').focus(function(){$('#aofei').get(0).scrollIntoView(true)});">
<input id="aofei" type="text" value="傲菲1" onkeydown="foo(this);" class="zac_inactiveOption" readonly><br>
<input id="aofei2" type="text" value="傲菲2" onfocus="this.scrollIntoView(true)" 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>
这个符合楼主要求？
Navymk 2008-05-30
  • 打赏
  • 举报
 回复
滚动条速度及滚动方式与子元素高度和窗口高度比例有些关系.当然也与客户端按下箭头的时间长度有关.
滚动事件与mousedown和mouseup及click等事件也没有必然的联系.我不清楚除了onscroll之外还有什么与之相关的滚动事件.
刚才测试了半天,觉得没戏.
fly_miss 2008-05-30
  • 打赏
  • 举报
 回复
微软的AutoComplete啊。

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx

你在框里面输入xyzn然后等阵就看到下拉列表了，

然后你按down，进入到下拉列表，他的滚动条不滚动
syeerzy 2008-05-30
  • 打赏
  • 举报
 回复
你说的 "微软的" 是什么URL, 给个链接看看. 我主要是不理解你需要达到的效果, 先看看
Janyue 2008-05-30
  • 打赏
  • 举报
 回复
关注
fly_miss 2008-05-30
  • 打赏
  • 举报
 回复 
<html>

<head>

<style type="text/css">

<!--

.zac_container

{

    height: 200px;

    width:400px;

    margin: 0px;

    padding: 0px;

    border: 1px solid #000000;

    overflow: auto;

}

.zac_inactiveOption{

    width:380px;

    height:20px;

    border: 0px none #FFFFFF;

    margin: 0px;

    padding: 0px;

}

.zac_activeOption {

    background-color: #FF0000;

    width:380px;

    height:20px;

    border: 0px none #FFFFFF;

    margin: 0px;

    padding: 0px;

}

-->

</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可视，就给分。这个评分标准非常明确。
fly_miss 2008-05-30
  • 打赏
  • 举报
 回复
找到在系统scroll之后的切入点，我就给分。

就是说，在系统scroll之后修改scrollTop的方法！

或者

屏蔽系统scroll的方法。
两者之一我都给分，两个帖子都会补分到上限分数。
fly_miss 2008-05-30
  • 打赏
  • 举报
 回复
[Quote=引用 20 楼 chinmo 的回复:]
你第一个是我测试时鼠标点击
按按down按钮时直接就第二个了
[/Quote]

因为我做的是一个AutoComplete。

所以必然要从一个输入框进入提示框，提示框就是这个div了。而如何进入的，就是通过down进入的。
我这里给的样例没有给出这样一个过程，这里抱歉了。

所以必须在第一次系统scroll之后，把scrollTop归0。

而我根本没办法在这个时刻切入。你给的也是在系统scroll之前切入，不是之后。

我有想过屏蔽系统的scroll事件，但是发现，根本无法屏蔽，他是无法cancel的，这一点msdn上提到了。
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复 
<html>

<head>

<style type="text/css">

<!--

.zac_container

{

    height: 200px;

    width:400px;

    margin: 0px;

    padding: 0px;

    border: 1px solid #000000;

    overflow: auto;

}

.zac_inactiveOption{

    width:380px;

    height:20px;

    border: 0px none #FFFFFF;

    margin: 0px;

    padding: 0px;

}

.zac_activeOption {

    background-color: #FF0000;

    width:380px;

    height:20px;

    border: 0px none #FFFFFF;

    margin: 0px;

    padding: 0px;

}

-->

</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>

我测试的时候是可以的
在IE下
FF下还没测试
fly_miss 2008-05-30
  • 打赏
  • 举报
 回复
从一个div之外的textBox进入div是通过按down键进入的，所以这个按键会触发下拉事件。
而此时你就算将scrollTop归0,他还是会下拉。

必须找到在系统scroll动作之后的切入点。

如果仅仅是进入div之后的上下控制是很容易的，关键是如何处理从外面第一次进入div时的下拉事件?
你的切入点是在系统scroll之前的，必须在系统scroll之后切入才可以。
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
你第一个是我测试时鼠标点击
按按down按钮时直接就第二个了
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 fly_miss 的回复:]
To:14楼

不管你的scrollTop怎么设置，这个设置的过程都是在系统scroll之后发生的。
第一次进入Div时，焦点聚焦到第一个时，会触发scroll，第一个还是被遮住！
[/Quote]
我测试过了的
不知道你的是怎么进入第一个的
我按一下就已经是第二个了
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
具体的你再自己调下其中的值
xiaoniao_28 2008-05-30
  • 打赏
  • 举报
 回复
学习下。
加载更多回复（16）
.NET社区

62,243

社区成员

668,998

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章