html垂直滚动滚动区域设置,html中设置某个区域手动上下滚动

手动滚动

#mybox{

overflow:hidden;

background:#CCC;

height:100px;

width:200px;

}

.up ,.down{ background:#63F;width:200px;}

var myTimer;

// 速度毫秒值越小速度越快

var speed=200;

// 值越大越快

var stepSpeed=4;

$(function(){

var mybox=$("#mybox");

//向上

$(".up").bind("mouseover",function(){

var nowPos=mybox[0].scrollTop;//当前值

changePos(mybox,nowPos,0);

}).bind("mouseout",function(){

if(myTimer){window.clearInterval(myTimer);}

});

//向下

$(".down").bind("mouseover",function(){

var nowPos=mybox[0].scrollTop;//当前值

var maxPos=mybox[0].scrollHeight;//最大值

changePos(mybox,nowPos,maxPos);

}).bind("mouseout",function(){

if(myTimer){window.clearInterval(myTimer);}

});

});

function changePos(box,from,to){

if(myTimer){window.clearInterval(myTimer);}

var temStepSpeed=stepSpeed;

if(from>to){

myTimer=window.setInterval(function(){

if(box[0].scrollTop>to)

{box[0].scrollTop-=(5+temStepSpeed);}

else{window.clearInterval(myTimer);}

},speed);

}else if(from < to){

myTimer=window.setInterval(function(){

if(box[0].scrollTop

{box[0].scrollTop+=(5+temStepSpeed);}

else{window.clearInterval(myTimer);}

},speed);

}

}

向上

测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容

向下

实现的主要思路：

固定div的宽度和高度，设置CSS的overflow:hidden，然后使用js代码修改div的scrollTop值就可以实现滚动了。

元素内容总高度(若没有设置滚动条，内容可以展开的高度) element.scrollHeight

已被滚动卷去的上方像素 document.body.scrollTop | document.documentElement.scrollTop

元素内容总宽度 (若没有设置滚动条，内容可以展开的宽度)element.scrollWidth

已被滚动卷去的左方像素 document.body.scrollLeft | document.documentElement.scrollLeft

可以依据这些实现的其它功能：

动滚动，图片滚动等功能，这是上下滚动，左右滚动的实现应该也没有什么问题了吧