文档章节

screen/client/offset/scroll/inner/avail的概念

花儿与少年
 花儿与少年
发布于 2016/11/29 21:41
字数 444
阅读 7
收藏 0

screen/client/offset/scroll/inner/avail的概念

名词解释

  • screen: 屏幕。获取有关用户显示器的各种信息。
  • client: 使用区、客户区。指的是客户区,是指浏览器区域。
  • offset: 偏移。指的是目标甲相对目标乙的距离。
  • scroll: 指包含滚动条的属性。
  • inner: 指内部部分,不包含滚动条。
  • avail: 可用区域,不包含滚动条。

window,浏览器宽高信息

//浏览器内容宽 + 滚动条宽
window.innerWidth;

//浏览器内容高 + 滚动条高
window.innerHeight;

//浏览器内容高 + 滚动条高 + 工具栏高 + 浏览器边框(QQ截图时可见边框)
window.outerHeight;

//浏览器内容宽 + 滚动条 + 浏览器边框
window.outerHeight;

window,浏览器偏移信息

//浏览器边框相对于显示器的X偏移量
//方便理解:类似左外边框的宽度。
window.screenLeft;  //兼容:ie6/7/8/9/10、chrome
window.screenX;     //兼容:ie9/10、chrome、firefox

//浏览器边框相对于显示器的Y偏移量
window.screenTop;
window.screenY;

window,浏览器滚动条滚动了的距离

//浏览器滚动条往左滚动了的偏移距离
window.pageXOffset;
window.scrollX;

//浏览器滚动条往下滚动了的偏移距离
window.pageYOffset;
window.scrollY;

screen, 显示器属性

//显示器宽度,像素单位
screen.width;

//显示器高度
screen.height;

//显示器可用宽度,一般与屏幕宽度一致
screen.availWidth

//显示器可用高度
screen.availHeight

element, 元素偏移属性

//content + padding,元素宽高
elment.clientWidth;

element.clientHeight;
//border 等于元素边框大小
element.clientLeft;

//上边框距离
element.clientTop;
//元素大小 content + padding + border [+ 滚动条]
element.offsetWidth;

element.offsetHeight;

// content + padding - 滚动条
element.scrollWidth;
element.scrollHeight;
//元素相对于已定位祖先元素的偏移距离,即设置了position属性的祖先元素。
element.offsetLeft;

element.offsetTop;
//获得水平、垂直滚动条的距离
element.scrollLeft;
element.scrollTop;

© 著作权归作者所有

共有 人打赏支持
花儿与少年
粉丝 0
博文 2
码字总数 1066
作品 0
成都
程序员
Android 控制ScrollView滚动到底部

转载自:http://blog.csdn.net/t12x3456/article/details/12799825 在开发中,我们经常需要更新列表,并将列表拉倒最底部,比如发表微博,聊天界面等等, 这里有两种办法,第一种,使用scrollT...

lv18092081172
2017/05/09
0
0
OA系统五彩种蓝色版现jin模式稳定无错 运营中版本Android中实现上下左右都可滑动的Scrol

OA系统五彩种蓝色版现jin模式稳定无错 下载地址 QQ 2952777280 import java.util.List; import android.widget.FrameLayout; import android.content.Context; import android.graphics.Rect......

vQ2952777280
07/03
0
0
随笔:offset、client、scroll的小总结

这段日子看到scrollTop,突然想起了这三个小兄弟,于是看了很多文章,但发现总结的各有优缺和对错,于是决定自己总结一下,仅当随笔。有错误的欢迎指正。 这些属性均是用于获取页面元素在网页...

我的头没你大
2016/12/06
11
0
图解Android View的scrollTo(),scrollBy(),getScrollX(), getScrollY()

Android系统手机屏幕的左上角为坐标系,同时y轴方向与笛卡尔坐标系的y轴方向想反。通过提供的api如getLeft , getTop, getBottom, getRight可以获得控件在parent中的相对位置。同时,也可以获...

微笑的江豚
2016/08/05
4
0
网页上的各种宽高

关系 window对象表示浏览器中打开的窗口 window.screen 对象包含有关用户屏幕的信息 document对象是window对象的一部分 window window.innerHeight: 去除工具条与滚动条的窗口高度 window.i...

v1-alpha
2016/11/13
11
0

没有更多内容

加载失败,请刷新页面

加载更多

74.expect脚本同步文件以及指定host同步文件 构建分发系统文件和命令

20.31 expect脚本同步文件: 在expect脚本中去实现在一台机器上把文件同步到另外一台机器上去。核心命令用的是rsync ~1.自动同步文件 #!/usr/bin/expect set passwd "123456" spawn rsync -a...

王鑫linux
39分钟前
0
0
TypeScript项目引用(project references)

转发 TypeScript项目引用(project references) TypeScript新特性之项目引用(project references) 项目引用是TypeScript 3.0中的一项新功能,允许您将TypeScript程序构建为更小的部分。 通过这...

durban
44分钟前
0
0
爬虫入门

导读 网络爬虫(Web crawler),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本,它们被广泛用于互联网搜索引擎或其他类似网站,可以自动采集所有其能够访问到的页面内容,以获取...

问题终结者
44分钟前
0
0
ppwjs之bootstrap文字排版:无序列表项不换行

<!DOCTYPT html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>ppwjs欢迎您</title><link rel="icon" href="/favicon.ico" ......

ppwjs
51分钟前
0
0
SpringBoot 学习一

本文将从以下几个方面介绍: 前言 HelloWorld 读取配置文件 例子(CURD) 前言 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架...

tsmyk0715
51分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部