<!-- <!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. HDU 2517 / POJ 1191 棋盘分割 区间DP / 记忆化搜索

    题目链接: 黑书 P116 HDU 2157 棋盘分割 POJ 1191 棋盘分割 分析:  枚举所有可能的切割方法. 但如果用递归的方法要加上记忆搜索, 不能会超时... 代码: #include& ...

  2. 当浏览器不支持placeholder，所执行的函数

    $(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...

  3. 【MFC学习笔记-作业9-基于单击响应的计算平均成绩】【】

    要求..单击出现 一个输入成绩的框,点确定后,计算平均成绩 意义很大~ 完成对话框   再写个鼠标点击的响应部分 鼠标点击的响应部分为难点.... void CWj1401_0302140107_9V ...

  4. （八）Android广播接收器BroadcastReceiver

    一.使用Broadcast Reciver 1.右击java文件夹,new->other->Broadcast Receiver后会在AndroidManifest.xml文件中生成一个r ...

  5. 必须知道的ADO.NET 数据库连接池

    http://www.cnblogs.com/liuhaorain/archive/2012/02/19/2353110.html 题外话 通过前几章的学习,不知道大家对ADO.NET有一定的了解了没 ...

  6. sqlserver高版本到低版本迁移

    从SqlServer2014 备份bak文件,在SqlServer2012中还原时遇到版本不兼容的问题. 经过leader 指导,可尝试以下办法处理数据迁移.共分三个步骤: 一.对需要迁移数据库生成s ...

  7. beforefieldinit释义（2）

    首先来看一段代码: using System; namespace BeforeFieldInit { internal class Foo { Foo(){ Console.WriteLine(&q ...

  8. Poem: Reserverd Words

    Let this long package float, Goto private class if short. While protected with debugger case, Contin ...

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

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

  10. asp.net自动打卡、签到程序

    目前公司上下班签到是上局域网的一个系统去点一下,由于打卡比较简单,所以有些快迟到的同事会找已经到公司的人帮忙代打卡.”以其它身份运行程序“来打开IE,去帮人打下,有时多几个人,也要这样操作,我感觉挺麻 ...