文档的几何形状和滚动

一:文档坐标和视口坐标

  在顶级窗口和标签页中,“视口”只是实际显示文档内容的浏览器的一部分:它不包括浏览器的“外壳(如菜单,工具条和标签页)。针对框架页中显示的文档,视口只是定义了框架页的《iframe》”

  如果文档比视口小,或者说他还未出现滚动,则文档的左上角就是视口的左上角,文档和视口坐标系统就是同一个。但是,一般来说,要在两种坐标之间互相转换,必须加上或减去滚动的偏移量(scroll offset)。

  例如,在文档坐标中如果一个元素的Y坐标是200px,并且用户已经把浏览器向下滚动75px;那么视口坐标中元素的Y坐标就是275px。文档坐标比视口坐标更加基础,并且在用户滚动中不会发生变化。

  

二:查询元素的几何尺寸

  判定一个元素的尺寸和位置最简单的办法就是调用它的getBoundingClientRectangle()方法。他不需要参数,返回一个有left,right,top和bottom的属性。

var obox = document.getElementById("box");
var arr = obox.getBoundingClientRect();
console.log(arr.width)/*200*/

三:总结

    var obox = document.getElementById("box");
    /*除了IE8及更早的版本外,其他的浏览器都可以用*/
    pageXOffset;
    pageYOffset;
    /*标准模式下的IE,任何浏览器*/
    document.documentElement.scrollLeft;
    document.documentElement.scrollTop;
    /*滚动条的位置*/
    document.documentElement.offsetHeight;
    document.documentElement.offsetWidth;
    /*元素的尺寸,以CSS像素返回它的屏幕尺寸,返回的尺寸包含元素的边框和内边距,出去了外边距*/
    obox.offsetWidth;
    obox.offsetHeight;
    /*元素的位置,返回x和y坐标*/
    obox.offsetLeft;
    obox.offsetTop;
    /*元素的尺寸,不包含边框大小,至包含内容和它的内边距。*/
    obox.clientWidth;
    obox.clientHeight;
时间: 2024-10-05 20:44:15

文档的几何形状和滚动的相关文章

文档和元素中与几何形状和滚动相关的属性和方法

pageXOffset, pageYOffset 浏览器窗口的滚动条位置,IE8以前的IE浏览器不支持,需要使用document.scrollLeft和document.scrollTop,对于怪异模式,则使用document.body.scrollLeft和document.body.scrollRight scrollLeft, scrollTop

WPS2019文档之插入形状图片图形

插入形状图片图形 1.插入图片 [插入]选项卡 2.插入形状 [插入]选项卡 按着 shift 绘制 正方形/圆形 3.形状基础操作 [插入]选项卡 3.1.选择 点选(ctrl) 框选(推出,按Esc键) 选择窗格 3.2.选择窗格的应用 重命名 显示与隐藏 层次调整 浮于文字上方 衬于文字下方 3.3.颜色填充 3.4.图形复制方法 Ctrl+拖动 Ctrl+c 3.5.图形大小设置 长度 宽度 4.形状效果对齐 形状效果 格式刷 对齐 旋转 组合:将两个以上图形组合成一个 微调 ----

第十三章 脚本化文档

客户端javascript存在使得静态的html文档编程了交互式的web应用.校本化web页面内容是javascript的核心目标.本章———本书最重要的章节之一,阐述了它是如何做到的客户端javascript的存在使得静态的html文档变成了交互式的web应用.校本化web页面javascript核心目标.本章将阐述它是如何做到的. 第11章和12章解释了每一个web浏览器窗口.标签也和框架由一个window对象所示.每个window对象有一个document对象,document对象表示窗口

JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)

概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是在JRoll第一版基础上重写JRoll滑动算法,基于时间运动,解决帧频降低时滑动缓慢的问题,更改垂直水平方向判断方法,使捕获垂直水平方向更准确灵敏. JRoll第二版增减了一些api不完全兼容JRoll第一版. 先睹为快 http://www.chjtx.com/JRoll/demos/ 运行示例

跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作

一.层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv">                </div>        <div class="div1">层1</div

实现窗口中的文档自动向上滚动,方便阅读

<!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" xml:lang="en"> <head> <meta ht

javascript走马灯的效果(文档标题文字滚动)

做一些网站的时候,文档标题会滚动,这个效果是走马灯的效果. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>走马灯的效果</title> </head> <body> <script> var dir=""; function zouma(){ var tit=document.title

文档事件、图片事件和页面滚动事件

1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文档事件</title> 6 <!-- 代码自身至下解析 --> 7 <script type="text/javascript"> 8 var div = document.querySele

从文档流认识html

写html,css的同学应该需要清楚什么是文档流.文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流. 每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动.内联元素也不会独有一行. 一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素.有三种状况将使得元素离开文档流而存在,分别是浮动.绝对定位.固定定位.然则在IE中浮动元素也存在于文档流中. 浮动元素不占任何正常文档流空间,而浮动元素的定位照样基于正常