html中设置某个区域手动上下滚动（转）_IT徐胖子

http://blog.sina.com.cn/u/1739256900

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

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

(2013-08-20 11:30:53)

标签：

html

滚动

it

分类： Web前端

<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

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：Java中ThreadLocal模拟和解释

后一篇：检测远程主机上的某个端口是否开启——telnet命令（转）

新浪BLOG意见反馈留言板　欢迎批评指正