636
html中設置某個區域手動上下滾動
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手動滾動</title>
<style type="text/css">
#mybox{
overflow:hidden;
background:#CCC;
height:100px;
width:200px;
}
.up ,.down{ background:#63F;width:200px;}
</style>
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
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 >向上</div>
<div >
測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容
</div>
<div >向下</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
可以依據這些實現的其它功能：
動滾動，圖片滾動等功能，這是上下滾動，左右滾動的實現應該也沒有什麼問題了吧
原帖地址：https://bbs.chinaunix.net/thread-2297953-1-1.html
最後更新：2017-04-03 16:48:59