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

最新推荐文章于 2024-07-16 15:35:21 发布

iteye_1485

最新推荐文章于 2024-07-16 15:35:21 发布

阅读量2k

点赞数

文章标签： javascript ViewUI

<html>

#mybox{

overflow:hidden;

background:#CCC;

height:100px;

width:200px;

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

</style>

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

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

else{window.clearInterval(myTimer);}
},speed);
}
}
</script>
</head>

<body>
<div class="up">向上</div>
<div id="mybox">
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
</div>
<div class="down">向下</div>
</body>
</html>

实现的主要思路：
固定div的宽度和高度，设置CSS的overflow:hidden，然后使用js代码修改div的scrollTop值就可以实现滚动了。
元素内容总高度（若没有设置滚动条，内容可以展开的高度） element.scrollHeight
已被滚动卷去的上方像素 document.body.scrollTop | document.documentElement.scrollTop
元素内容总宽度（若没有设置滚动条，内容可以展开的宽度）element.scrollWidth
已被滚动卷去的左方像素 document.body.scrollLeft | document.documentElement.scrollLeft

可以依据这些实现的其它功能：
动滚动，图片滚动等功能，这是上下滚动，左右滚动的实现应该也没有什么问题了吧

原帖地址：http://bbs.chinaunix.net/thread-2297953-1-1.html