<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 遨游、火狐浏览器就用这个吧-->
<!DOCTYPE>
<<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题</title>
</head>
<body>

</body>
</html>
<head>
    <meta charset="UTF-8">
    <title>随滚动条滚动的居中div</title>
   
    <script type="text/javascript">
    function scrollBox(){
                document.getElementById("centerBox").style.top=(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-document.getElementById("centerBox").offsetHeight)/2)+"px";
                document.getElementById("centerBox").style.left=(document.documentElement.scrollLeft+
        (document.documentElement.clientWidth-document.getElementById("centerBox").offsetWidth)/2)+"px";
    }
    window.onload=function(){
        scrollBox();
    }
    window.onscroll=function(){
        scrollBox();
    }

// function test(){
    //     scrollBox();
    // }
    // window.onscroll=test;//注意别写成onScroll,JS是区分大小写的，我就因为写错了，搞了半天效果都没出来
    // window.onload=test;//注意别写成onLoad
    </script>
</head>
<body>
<div style="width:400px; height:400px; border:1px solid #f1f1f1; background-color:red; position:absolute;
top:0px; left:0px;" id="centerBox"></div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div style="width:1200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>

PS：QMM亲自动手做的，自己做的总有成就感！

随滚动条滚动的居中div的更多相关文章

  1. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  3. jquery控制div随滚动条滚动效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...

  4. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  5. 让div固定在顶部不随滚动条滚动【转】

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. 设置DIV随滚动条滚动而滚动

    有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. div固定在浏览器的最上方，不随滚动条滚动

    #topDIV { position: fixed; ; ; width: 100%; height: 35px; border-bottom: 1px solid #eee; background- ...

  8. js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...

  9. jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

随机推荐

  1. Asp.Net构架(Http请求处理流程)、Asp.Net 构架(Http Handler 介绍)、Asp.Net 构架(HttpModule 介绍)

    转载: HttpHaddler,HttpModule http://blog.csdn.net/jiuqiyuliang/article/details/18713451 http://www.cnb ...

  2. linux之SQL语句简明教程---CREATE TABLE

    表格是数据库中储存资料的基本架构.在绝大部份的情况下,数据库厂商不可能知道您需要如何储存您的资料,所以通常您会需要自己在数据库中建立表格.虽然许多数据库工具可以让您在不需用到 SQL 的情况下建立表格 ...

  3. mongodb导出命令

    ./mongoexport -d admin -c col -o col.json 找到了 导出所有数据库的 http://www.jb51.net/article/52498.htm

  4. Java面向对象面试案例

  5. crm2011js操作选项卡和节点

    CRM窗口选项卡的操作 crm2011节点的操作

  6. ok6410驱动usb摄像头

    为了做图像处理,须要用摄像头,搜到实验室仅仅有一个摄像头,是国安的.详细參数在终端中看到: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGluZzEyM ...

  7. DevExpress GridControl一些属性使用方法总结

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 (1).gridView.AddN ...

  8. asp.net 2.0 Session丢失问题

    可行的解决方法(本人已用): 1.Web.config文件修改sessionstate模式(默认为InProc) <sessionState mode="/> 2.开启ASP.N ...

  9. C#5 复习总结循环 迭代和穷举

    一.章节复习: 循环.反复执行某段语句一种语法形式. 1.基本语法: for( 初始条件 ; 循环条件 ; 状态的改变 ) { 循环体 } 循环的四要素. 循环的执行过程.初始条件--循环条件--循环 ...

  10. Spring-----自定义属性编辑器

    转载自:http://blog.csdn.net/hekewangzi/article/details/51712963