1.这是运行效果：

向上(请把鼠标移到这里)
  • 0test
  • 1test
  • 2test
  • 3test
  • 4test
  • 5test
  • 6test
  • 7test
  • 8test
  • 9test
  • 10test
  • 11test
  • 12test
  • 13test
  • 14test
  • 15test
  • 16test
  • 17test
  • 18test
  • 19test
  • 20test
  • 21test
  • 22test
  • 23test
  • 24test
  • 25test
  • 26test
  • 27test
  • 28test
  • 29test
  • 30test
  • 31test
  • 32test
  • 33test
  • 34test
  • 35test
  • 36test
  • 37test
  • 38test
  • 39test
  • 40test
  • 41test
  • 42test
  • 43test
  • 44test
  • 45test
  • 46test
  • 47test
  • 48test
  • 49test
  • 50test
  • 51test
  • 52test
  • 53test
  • 54test
  • 55test
  • 56test
  • 57test
  • 58test
  • 59test
  • 60test
  • 61test
  • 62test
  • 63test
  • 64test
  • 65test
  • 66test
  • 67test
  • 68test
  • 69test
  • 70test
  • 71test
  • 72test
  • 73test
  • 74test
  • 75test
  • 76test
  • 77test
  • 78test
  • 79test
  • 80test
  • 81test
  • 82test
  • 83test
  • 84test
  • 85test
  • 86test
  • 87test
  • 88test
  • 89test
  • 90test
  • 91test
  • 92test
  • 93test
  • 94test
  • 95test
  • 96test
  • 97test
  • 98test
  • 99test
向下(请把鼠标移到这里)

2.代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手动滚动</title>
<style type="text/css">
	ul,li{margin:0;padding:0;}
	ul li{ line-height:25px;}
	#mybox{
		overflow:hidden;
		background:#CCC;
		height:100px;
		width:200px;
	}
	.up ,.down{ background:#63F;width:200px;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.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 - mybox.outerHeight();//最大值
				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);temStepSpeed+=temStepSpeed;}
					else{window.clearInterval(myTimer);}
					},speed);
			}else if(from < to){
				myTimer=window.setInterval(function(){
					if(box[0].scrollTop<to){box[0].scrollTop+=(5+temStepSpeed);temStepSpeed+=temStepSpeed;}
					else{window.clearInterval(myTimer);}
					},speed);
			}
		}
		

</script>
</head>

<body>
<div class="up">向上</div>
<div id="mybox">
	<ul>
    	<li>0test</li><li>1test</li><li>2test</li><li>3test</li><li>4test</li><li>5test</li><li>6test</li><li>7test</li><li>8test</li><li>9test</li><li>10test</li><li>11test</li><li>12test</li><li>13test</li><li>14test</li><li>15test</li><li>16test</li><li>17test</li><li>18test</li><li>19test</li><li>20test</li><li>21test</li><li>22test</li><li>23test</li><li>24test</li><li>25test</li><li>26test</li><li>27test</li><li>28test</li><li>29test</li><li>30test</li><li>31test</li><li>32test</li><li>33test</li><li>34test</li><li>35test</li><li>36test</li><li>37test</li><li>38test</li><li>39test</li><li>40test</li><li>41test</li><li>42test</li><li>43test</li><li>44test</li><li>45test</li><li>46test</li><li>47test</li><li>48test</li><li>49test</li><li>50test</li><li>51test</li><li>52test</li><li>53test</li><li>54test</li><li>55test</li><li>56test</li><li>57test</li><li>58test</li><li>59test</li><li>60test</li><li>61test</li><li>62test</li><li>63test</li><li>64test</li><li>65test</li><li>66test</li><li>67test</li><li>68test</li><li>69test</li><li>70test</li><li>71test</li><li>72test</li><li>73test</li><li>74test</li><li>75test</li><li>76test</li><li>77test</li><li>78test</li><li>79test</li><li>80test</li><li>81test</li><li>82test</li><li>83test</li><li>84test</li><li>85test</li><li>86test</li><li>87test</li><li>88test</li><li>89test</li><li>90test</li><li>91test</li><li>92test</li><li>93test</li><li>94test</li><li>95test</li><li>96test</li><li>97test</li><li>98test</li><li>99test</li>
    </ul>
</div>
<div class="down">向下</div>

</body>
</html>

3.实现的主要思路

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

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

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

5.注意:

 　　代码中使用了jquery,要运行测试请引入jquery.(当然你也可以基本js代码实现该功能的，试着尝试一下吧。)

欢迎拍砖

本文为作者原创 转载请注明出处

作者: 与您分享我的快乐 ---笨笨 发表于 2011-04-08 09:02 原文链接

Tag html中设置某个区域手动上下滚动
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架