随滚动条滚动的居中div

最新推荐文章于 2024-05-30 11:21:03 发布
最新推荐文章于 2024-05-30 11:21:03 发布
阅读量307 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/QMM2008/p/4131142.html
版权

<!-- <!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.οnlοad=function(){
        scrollBox();
    }
    window.οnscrοll=function(){
        scrollBox();
    }

    // function test(){
    //     scrollBox();
    // }
    // window.οnscrοll=test;//注意别写成onScroll,JS是区分大小写的，我就因为写错了，搞了半天效果都没出来
    // window.οnlοad=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亲自动手做的，自己做的总有成就感！

转载于:https://www.cnblogs.com/QMM2008/p/4131142.html

weixin_33834628
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
怎么让html滚动字幕居中,CSS设置DIV窗口上下居中无滚动条
weixin_29163581的博客
05-30 1440
前端开发中，免不了居中的需求。对于居中有很多方法，本次介绍一个不用js获取窗口，纯css给div“肉眼上的”上下左右居中，并且没有滚动条的实例。为什么说是“肉眼上的”，可以看看下面的介绍。话不多说，先来感受一下！！！点击图片跳转通过上面一个案例，可以看到无论怎样调整游览器窗口的大小，都不会出现滚动条，div始终在中间。div宽度大于窗口会被隐藏掉如何实现？上面的案例就是利用了CSS的 vertic...
JS垂直以及横向滚动条精确定位居中某一元素
2401_83621384的博客
03-17 545
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
让div在页面居中（滚动条滚动时也居中）
稻花香的博客
12-23 1140
【代码】让div在页面居中（滚动条滚动时也居中）
html滚动字幕居中,解决div用margin:auto水平居中遇到滚动条跳动的问题
weixin_36212050的博客
05-31 646
目前div水平居中用的方法基本上都是margin:auto，这种方法在大多数时候没什么问题，但是如果遇到界面在滚动条中切换的时候，div就会左右跳动。如何才能解决这个问题呢？我们想到了一个vw的长度单位，vw相对于视口(viewport)的宽度。视口被均分为100单位的vw。而100%的宽度是相对于浏览器窗口(window)的宽度，利用二者这个不同，来解决如上问题。代码如下：html,body{p...
div 加滚动条 超过div宽度 自动换行 div居中
weixin_30377461的博客
08-22 365
一、div 中加滚动条 一、 <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢，否则不成的 不过在不超出时，会有下面的滚动条，所以不是最好的选择 二、 <div style=" overflow-y:auto; overf...
html位置不随滚动条,下来的时候Div不会跟随滚动条移动，问题出在哪里
weixin_34474759的博客
06-04 175
html>shangxiabody{margin:0;padding:0;}#div1{width:100px;height:100px;background:red;margin:0auto;}#div1{width:100px;height:100px;position:absolute;right:50%;margin-right:-50px;}windo...
div弹出html页面滚动条滚动,html – 用浏览器的主滚动条滚动特定的DIV内容
weixin_33179966的博客
06-04 238
虽然您的Gizmodo示例使用附加脚本来处理侧边栏(即使在所有浏览器中都不起作用)的(垂直滚动条)，但效果完全可以用纯CSS，甚至不会像看起来那么困难第一眼。所以你要：>对于不同的浏览器窗口尺寸，水平居中的布局可能会扩大或缩小，>左侧的主要内容可以通过浏览器的主滚动条垂直滚动，>右侧的侧边栏粘贴在浏览器窗口的顶部，可以与主要内容分开滚动，只有在鼠标悬停时才显示其滚动条。当滚动到边...
纯css居中弹出层 随滚动条居中
rinima6114的专栏
12-27 3355
本文只对css新手普及基本知识，高手飘过。 另，本文只说明弹出层如何固定居中在屏幕正中，并且随滚动条移动始终居中。 弹出、关闭事件简单，请自行解决。 下面开始正文，请先看图，如何让一个宽度 400px的弹出窗口居中，这次首先要用到一个很基础的常识 left ,top,width,height等的标示方法，可以是 auto 默认值。浏览器可计算出实际的宽
使div或img在滚动条滚动时，始终居中在屏幕中间
Love_云宝儿的博客
09-28 2627
直接上代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telphone=no, email=no"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
前端设置滚动条位置居中
felicity_zll的博客
03-31 2969
一、解决方案 滚动的元素.scrollLeft = （滚动的元素.clientWidth - 外层盒子.clientWidth）/ 2 完整DEMO <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
html滚动图片居中,图像不随滚动条移动，始终固定在网页垂直居中央的特效
weixin_39723441的博客
06-04 1069
让一个 div(有背景图片) 在页面里面固定，位置需要水平和垂直居中，且不随页面的滚动而滚动以下讨论的是和滚动条 垂直居中 相关的图像不随滚动条移动，始终固定在网页垂直居中央的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：脚本代码(For Alixixi.com)如下:图片保持垂直居中的网页特效.logo {width: 540px;height: 25...
div浮层,滚动条移动,位置保持不变的4种方法汇总
12-08
div在顶部不变、滚动条滚动，div还是在顶部！直接上传源码了： 方法一： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
JS弹出居中的DIV的代码
01-19
首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而...
js实现div随浏览器高度变化
06-11
js实现div随浏览器高度变化，主要是高度变化和实现滚动条，还有侧栏显示隐藏，可以作为一个地图开发界面的参考
jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动
04-18
如：我想要<div id="ok">这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件，...
jQuery实现弹出窗口弹出div层的实例代码
01-21
无论是改变浏览器窗口大小还是下拉滚动条，这个弹出层都能始终保持居中；点击页面的关闭按钮，弹出层消失，页面恢复原样。 这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》，使弹出窗口可以始终固定在浏览器的正...
常见的 HTML 标准
csdn_ad986ad的博客
04-30 897
HTML（Hypertext Markup Language）有多个版本和标准。
【redis】Spring之RedisTemplate配置与使用
最新发布
05-30 330
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1091
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
html在最右侧中部添加一个按钮可以随纵向滚动条滚动一直保持这个位置
07-15
要在最右侧中部添加一个按钮，并使其随纵向滚动条滚动一直保持在这个位置，你可以使用CSS的`position: fixed`属性来实现。下面是一个示例的HTML和CSS代码： HTML代码： ```html <div class="container"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值