如何让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 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
。。。。。不是吧,你越改越长啊!!
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>


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

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

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

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

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

你是直接在input里面就让事件不再向上冒泡了,很不错。
  • 打赏
  • 举报
回复
因为家里没装FF无法测试FF的
你在这基础上改兼容FF的就可以了
IE上是正确没错的了
  • 打赏
  • 举报
回复
我再改进一下,就和你给你的网址的效果一模一样了
<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>
  • 打赏
  • 举报
回复
回家来仔细看了你的代码,果然是我跟你说的
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">
<!--
.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
  • 打赏
  • 举报
回复
期待中...
  • 打赏
  • 举报
回复
回家再给你写吧
先闪人
  • 打赏
  • 举报
回复
[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>



这样就行了,用百分比来计算
  • 打赏
  • 举报
回复
[Quote=引用 13 楼 fly_miss 的回复:]
引用 11 楼 chinmo 的回复:


不管你的scrollTop怎么设置,这个设置的过程都是在系统scroll之后发生的。
第一次进入Div时,焦点聚焦到第一个时,会触发scroll,第一个还是被遮住!
[/Quote]
这个简单,加一个来判断参数变量来判断
  • 打赏
  • 举报
回复
我测试可行的,至于你说的在系统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)

87,997

社区成员

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

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