<!-- <!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. ubuntu 下node 环境的安装

    1. 安装nodejs sudo apt-get install nodejs 注意:包名是nodejs 2. 建立node软连接 #找到nodejs位置 which nodejs # /usr/bi ...

  2. 命名空间“Aspose”中不存在类型或命名空间名称“Slides”。

    有可能引用的dll与项目的 .netFramework版本不同,需要确认两个版本是否相同.如果不同,项目右键->属性->应用程序.选择和引用的dll相同的版本.

  3. 深信服笔试题（网络project师售后）

    总共同拥有3到大题, 1选择 主要有ip地址计算.http协议.vrrp协议. 2.主要是linux填空题 a.linux显示全部系统载入模块____ b.写出linux的两个开机启动程序___.__ ...

  4. 三十、Java图形化界面设计——布局管理器之BorderLayout（边界布局）

    边界布局管理器把容器的的布局分为五个位置:CENTER.EAST.WEST.NORTH.SOUTH.依次相应为:上北(NORTH).下南(SOUTH).左西(WEST).右东(EAST),中(CENT ...

  5. HTML——JAVASCRIPT——光棒效果

    光棒效果:建立一个表格,鼠标放到哪一行,哪一行的颜色就改变,鼠标离开那一行,那一行的颜色就恢复到原来的颜色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. JBOSS javax.naming.NameNotFoundException: xxx not bound

    当出现JOBSS部署EJB  xxx not bound 请查看ejb.jar 是否打包完全正常,是不是缺配置文件,一般是缺少配置文件或者打包不正确.

  7. zookeeper_00：zookeeper注意事项

    需要将应用数据和协同数据独立开. 比如:网络邮箱服务的用户对自己邮箱中的内容感兴趣,但是并不关心由哪台服务器来处理特定邮箱的请求.在这个例子中,邮箱内容就是应用数据,而从邮箱到某一台邮箱服务器之间的映 ...

  8. 与时间有关的windows函数

    (一)time_t time(time_t *t) 如果t是空指针,直接返回当前时间.如果t不是空指针,返回当前时间的同时,将返回值赋予t指向的内存空间. 这个函数的返回值,是指自 Unix 纪元(J ...

  9. 使用CRT定位内存泄漏

    1. 使能内存泄漏检测#define _CRTDBG_MAP_ALLOC#include <stdlib.h>#include <crtdbg.h>注1:语句顺序不能修改:注2 ...

  10. 【转】commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar实现文件上传

    总共:一个upload.jsp,一个FileUploadServlet.java,两个文件:ImagesUploaded,ImagesUploadTemp, 一个web.xml,两个架包:common ...