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

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

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

备注：在ASP.NET版发了同样的问题，这边可以解决的话，可过去回答，可得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>


...全文
401 34 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
34 条回复
切换为时间正序
请发表友善的回复…
发表回复
一把编程的菜刀 2008-05-31
  • 打赏
  • 举报
 回复
。。。。。不是吧，你越改越长啊！！
YH_Random 2008-05-31
  • 打赏
  • 举报
 回复 


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


这个就是你要的效果
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
呵呵，你要开始就给后来那段代码就不会误导我了，开始我怎么想怎么进入的第一个呢
fly_miss 2008-05-30
  • 打赏
  • 举报
 回复
帖子要发帖超过1天才能加分。我明天晚上回来结贴。
fly_miss 2008-05-30
  • 打赏
  • 举报
 回复
非常好。

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

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

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

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

你是直接在input里面就让事件不再向上冒泡了，很不错。
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
因为家里没装FF无法测试FF的
你在这基础上改兼容FF的就可以了
IE上是正确没错的了
一把编程的菜刀 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>
Navymk 2008-05-30
  • 打赏
  • 举报
 回复
期待中...
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
回家再给你写吧
先闪人
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
[Quote=引用 21 楼 fly_miss 的回复:]
微软的AutoComplete啊。

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

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

然后你按down，进入到下拉列表，他的滚动条不滚动
[/Quote]

这个下拉效果
晕！
YH_Random 2008-05-30
  • 打赏
  • 举报
 回复
原来你要这个效果，Wating...
fly_miss 2008-05-30
  • 打赏
  • 举报
 回复
微软的AutoComplete啊。

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

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

然后你按down，进入到下拉列表，他的滚动条不滚动
YH_Random 2008-05-30
  • 打赏
  • 举报
 回复
那我的已经实现了。。。
Haoze 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可视，就给分。这个评分标准非常明确。
YH_Random 2008-05-30
  • 打赏
  • 举报
 回复
测试可以的哈。。。
YH_Random 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 $(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>



这样就行了，用百分比来计算
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 fly_miss 的回复:]
引用 11 楼 chinmo 的回复:


不管你的scrollTop怎么设置，这个设置的过程都是在系统scroll之后发生的。
第一次进入Div时，焦点聚焦到第一个时，会触发scroll，第一个还是被遮住！
[/Quote]
这个简单，加一个来判断参数变量来判断
一把编程的菜刀 2008-05-30
  • 打赏
  • 举报
 回复
我测试可行的，至于你说的在系统scroll之后切入，可以再加一个j来控制，如以下：
<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>
加载更多回复（14）
[转]如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
首先，我们将目光投向了CSS规范，我想很多人和我一样很快就想到了position属性，说到定位，我们很容易想到这个属性。这个属性一共有四个 选项：static、relative、absolute、fixed。很高兴，我们在阅读了相关的注释后，我们大概能看到fixed是比较符合我们的需 求的： fixed: 位置被设置为fixed的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过"...
浏览器刷新不记住之前的滚动位置
什么意思呢？其实是个浏览器的一个小细节哈，大家可以随便找个网址（B站或者csdn啥的），内容超出浏览器可视区域的都可以，右侧会有个滚动条，这时候向下滚动，然后去刷新浏览器，你会发现浏览器默认会记住当前滚动的位置，可能某些场景下，我们不想让它记住，刷新浏览器想让它回到顶部的位置，这时候怎么去处理呢？下面来简单介绍因为咱也是Vue技术栈的小伙子，所以这里还是以Vue为例。
【Vue】3.屏幕自适应加滚动条
【代码】【Vue】3.屏幕自适应加滚动条。
查看页面滚动条滚动距离，可视区窗口尺寸
1、滚动条距离 ie9以上及其它浏览器 window.pageXOffset / pageYOffset ie8以及ie8以下 //document.body.scrollLeft / top //document.documentElement.scrollLeft 获取滚动条滚动距离 function getScrollOffset() { ...
前端页面双向滚动方案
脱离canvas后，页面如何实现上下左右双滑动？又如何在安卓系统和iOS系统上实现？背景在许多业务场景中会遇到让一个页面在web端可以实现双向滚动，且在滚动的时候可以上部吸顶，左侧吸在最左...
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章