文档章节

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

花儿与少年
 花儿与少年
发布于 2016/11/29 21:41
字数 444
阅读 7
收藏 0
点赞 0
评论 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
客户区尺寸client

关于元素尺寸,一般地,有偏移大小offset、客户区大小client和滚动大小scroll。前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区大小   客户区大小...

jjjssswww
2017/06/06
0
0
flask 不停刷新页面,崩溃

我在本地电脑上安装了flask,并且用例子建了一个web服务器,一切正常 我开始玩了,我用浏览器按住F5不停的刷新页面时,flask就崩溃了。 例子: from flask import Flaskapp = Flask(name) @ap...

天国王朝
2016/07/27
1K
2
JS之offset scroll系列

三大系列:offset、scroll、client offset:偏移、补偿、位移 offset 系列是 js 中的一套获取元素尺寸的便捷办法 JS中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括: 获取...

Halukn
05/13
0
0
Hawkular 1.0 Alpha1 发布,监控解决方案

Hawkular 1.0 Alpha1 发布了,Hawkular 是一个开源的监控解决方案,是 RHQ 项目 的改进版本,受益于多年的经验,Hawkular 设计之初就考虑模块化和可伸缩性,因此组件可在应用之外进行重用。H...

oschina
2015/06/05
804
0
自己写了一个滑动门插件,但是在一个页面上无法处理多个效果

麻烦js高手帮忙看看: 插件是这个: var akulubala = { "init":{"speed":1000, "direction":"bottom",//direction "mode":"fitful",//scroll mode durative or fitful "id":"akulubalascrol......

akulubala_
2013/03/03
362
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部