<!-- <!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. poj 1887 Testing the CATCHER_最长上升子序列

    题意:题目太长没看,直接看输入输出猜出是最长下降子序列 用了以前的代码直接a了,做法类似贪心,把最小的顺序数存在数组里面,每次二分更新数组得出最长上升子序列 #include<iostream& ...

  2. [置顶] Ajax核心--XMLHttpRequest对象

    XMLHttpRequest 对象是AJAX功能的核心,学习XMLHttpRequest对象就先从创建XMLHttpRequest 对象开始,了解在不同的浏览器中创建XMLHttpRequest 对象 ...

  3. 我使用过的Linux命令之file - 检测并显示文件类型

    摘自:http://codingstandards.iteye.com/blog/804463 我使用过的Linux命令之file - 检测并显示文件类型 用途说明 file命令是用来检测并显示文件类 ...

  4. cf公式专场-续

    Benches Time Limit:500MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  5. 连不上VSS 【转】

    今天打开项目,但是连不上VSS,报错如下: (一)现象: Could not find the Visual SourceSafe Internet Web Service connection in ...

  6. 分享一个用安卓手机就能引导pc安装linux系统办法

    1.首先安卓手机下载软件DriveDroid.apk http://pan.baidu.com/s/1qW4pbT6 2.下载linux镜像文件放手机存储卡存储,放到Download/images/以 ...

  7. Android 4.4 Kitkat 使能 USB adb 功能

    背景 在 Linux-3.8 以后,Android 的内核分支,便去掉了 f_adb,改使用 USB function FS,在用户空间实现 USB adb 功能.这篇文章依据原作者的 Google+ ...

  8. asp.net web api的自托管模式HttpSelfHostServer可以以控制台程序或windows服务程序为宿主，不单单依赖于IIS web服务器

    Self-Hosting ASP.NET Web API http://theshravan.net/self-hosting-asp-net-web-api/ http://www.piotrwal ...

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

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

  10. (转)12款开源JavaScript库

    JavaScipt几乎是所有前端开发人员必会的编程语言,并且,随着各种移动APP的串红,JavaScript还可以用来开发移动应用.除此以外,为了丰富前端/移动开发,有不少开发者推出了各种基于Java ...