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

时间: 2024-11-08 23:23:54

html中设置某个区域手动上下滚动的相关文章

怎么在excel2010中设置打印区域

  excel2010设置打印区域的步骤: 首先在表格视窗中选择要打印的区域. 打印区域选定后,点击工具栏中:页面布局--打印区域--设置打印区域. 这时候要打印区域周围会有一个虑框,如果区域选择错误可以点击页面布局--打印区域--取消打印区域 按Ctrl+p,点击打印就可以打出你想要的内容了. 在excel2003中选择打印区域的方法与2007版中不同,首先选择要设置的区域,点击文件--打印区域--设置打印区域(红框处) 这时候要打印区域周围会有一个虑框,如果区域选择错误可以点击文件--打印区

在Word 2010中设置链接自动更新或手动更新

Word 2010文档中的链接更新方式包括"自动更新"和"手动更新"两种方式.如果使用"自动 更新"方式,则在打开包含有链接的Word文档时会提示用户是否使用链接文件中的数据更新本文档,如图2011081803所示 . 图2011081803 提 示用户是否更新链接数据 如果使用"手动更新"方式则不会提示更新链接,而需要用户手动进行更新.用户可以根据需要在Word 2010文档 中设置链接自动更新或手动更新,操作步骤如下所述:

在Word2010中设置链接自动更新或手动更新

Word2010文档中的链接更新方式包括"自动更新"和"手动更新"两种方式.如果使用"自动更新"方式,则在打开包含有链接的Word文档时会提示用户是否使用链接文件中的数据更新本文档,如图1所示. 图1 提示用户是否更新链接数据如果使用"手动更新"方式则不会提示更新链接,而需要用户手动进行更新.用户可以根据需要在Word2010文档中设置链接自动更新或手动更新,操作步骤如下所述:第1步,打开Word2010文档窗口,右键单击链接

android如何在fragment中设置屏幕的上半部分区域有触摸事件?

问题描述 android如何在fragment中设置屏幕的上半部分区域有触摸事件? 我设置了一个swiperefreshlistview,但是列表刷新的touch方法跟列表的滑动冲突了,请问下在fragment中怎么设置区域监听的 解决方案 列表布局是占满整个fragment么?如果不是的话,可以在xml布局中对部分区域设置点击无效,如果是占满fragment的话,但是想对其中一块区域监听,那就直接在代码中判断是否在那个区域范围内再做操作了 解决方案二: 在fragment上部分添加一个view

area-.NET MVC 中,默认路由 是否可以 设置为 区域中的视图?

问题描述 .NET MVC 中,默认路由 是否可以 设置为 区域中的视图? 例如,你程序一运行就自动去请求{area}/{controller}/{action}这个格式的链接? 解决方案 修改里: public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.M

android-在GridView视图中设置水平滚动的图像布局

问题描述 android-在GridView视图中设置水平滚动的图像布局 我想以gridview的视图显示图像缩略图,要求这些图像排成一列以水平滚动条的形式显示.我设置了很多参数,但是检查不出哪里出错了.显示出来的图像根本不是按照原计划显示的.请大家帮忙纠错,谢谢!mian.xml <LinearLayout xmlns:android=""http://schemas.android.com/apk/res/android"" android:layout_

ZBrush如何在UV Master中设置UV的观察效果

  如何在UV Master中设置UV的观察效果做详细讲解. 在UV Master参数面板中单击"Work On Clone"按钮,则系统会把当前模型复制出一个,并在复制出的模型上拆分UV,同时自动改变材质类型,以方便用户观察.接下来单击"Unwrap [打开]"按钮,系统会自动拆分并松弛UV,该过程只需要短短几秒钟就可以完成,在"Texture Map [纹理贴图]"中打开"Texture On [打开纹理]",并选择棋盘格

Android中设置TextView首行缩进

在文字排版的时候经常要设置首行缩进,使用过word的都会知道,那么在Android中当需要设置首行缩进的时候该肿么办呢,我总结了两种方式: 第一种:傻瓜式,空格充当(8个空格占两个汉字的大小). textView.setText("        设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进"); 第二种:转义字符. textView.se

Android中跑马灯既能水平滚动,又能上下滚动。。

问题描述 Android中跑马灯既能水平滚动,又能上下滚动.. 就是有三条数据,三条数据字数比较多,我想利用跑马灯,既能三条数据上下循环滚动,又能每条数据水平滚动,请问这个可以实现吗? 解决方案 水平的用marquee,垂直的用js设置下容器的scrollTop来循环滚动或者反过来也行,反过来容器要设置scrollLeft 解决方案二: HTML里的标签可以实现你的要求 解决方案三: 用marquee,垂直的用js设置下容器的scrollTop来滚动