scrollwidth和clientwidth_vue监听页面滚动

scrollwidth和clientwidth_vue监听页面滚动本文并非原创,只是真心觉得好,特别是图解的很到位,我在js中经常会用到,就记下来,与大家分享。HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight:获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTo

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

本文并非原创,只是真心觉得好,特别是图解的很到位,我在js中经常会用到,就记下来,与大家分享。

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 

  以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

 

onMouseover当鼠标经过的时候,触发 = 后面的脚本函数
onMouseout 当鼠标离开 。。
onMouseUP 当鼠标 按下又抬起。。。
onmousemove 当鼠标移动。。
onmousedown 当鼠标按下时。。

scrollwidth和clientwidth_vue监听页面滚动

 

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。

以上属性在 FireFox 中也有效。

另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的)

 

 

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

 

 

clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

说明
以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器

scrollTop 是“卷”起来的高度值,示例:

<div style=”width:100px;height:100px;background-color:#FF0000;overflow:hidden;” id=”p”>

<div style=”width:50px;height:300px;background-color:#0000FF;” id=”t”>如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>

</div>

<script type=”text/javascript”>

var p = document.getElementById(“p”);

p.scrollTop = 10;

</script>

由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷,这卷起来的部分就是 scrollTop。

scrollLeft 也是类似道理。

我们已经知道 offsetHeight 是自身元素的宽度,而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。

IE 和 FireFox 全面支持,而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。

 

1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.

2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.

4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.

5.style.left:
定位元素与包含它的矩形左边界的偏移量

6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.

7.style:posLetf:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em  
   
top,pixelTop,posTOp这几个类比就行了.
LEFT:   为从左向右移的位置,即挂件距离屏幕左边缘的距离;
clientLeft   返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
offsetLeft   返回对象相对于父级对象的布局或坐标的left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向的x坐标
pixelLeft   设置或返回对象相对于窗口左边的位置
scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。
clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置
scrollLeft:返回和设置当前横向滚动务的坐标值

<input type=”button” value=”点一下” οnclick=”move()”>
<div id=”d” style=”background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll”
οnclick=”alert(‘offsetLeft:’+this.offsetLeft)”>
<div style=”height:600;width:600″ οnclick=”alert(‘offsetLeft:’+this.offsetLeft)”></div>
</div>
<script language=”javascript”>
function move()
{
var d=document.getElementById(“d”)
a=eval(20)
d.scrollLeft+=a
}
</script>

保存为网页,运行一下,点按钮,滚动条移动
点击div,先弹出b相对于a的位置,再弹出a相对于窗口的位置

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/195976.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 禁止validateRequest的办法

    禁止validateRequest的办法A  potentially  dangerous  Request.Form  value  was  detected  from  the  client  (txtTest=””).  由于在.net中,Request时出现有HTML或Javascript等字符串时,系统会认为是危险性值。立马报错。  解决方案一:    在.aspx文件头中加入这句:        解决方案二:    修

  • 详解独立成分分析

    详解独立成分分析最近在学习数据降维的一些方法(有关数据降维的其他内容请看这篇文章),虽然独立成分分析不算是严格意义上的降维方法,但是它和PCA有着千丝万缕的联系,所以打算专门写一篇文章来学习ICA的相关知识,看了挺多的关于ICA的博文,有些文章讲的比较详细。有句话是这么说的:“论文是详细版的知识讲解”,也就是说如果想深入详细的了解某个知识,那么去读相关论文,所以阅读了一篇经典的ICA论文,作者是A.Hyva¨r…

  • kubeedge 安装部署(适用于Ubuntu)「建议收藏」

    kubeedge 安装部署(适用于Ubuntu)「建议收藏」kubeedge安装部署(适用于Ubuntu)基础环境:安装了Ubuntu18.04操作系统的两台虚拟机(查看操作系统版本命令:cat/etc/os-release)部署kubeedge1.1.0版本根据keadm源码安装部署步骤整理(无法直接使用keadm工具完成部署)一、配置源,写入以下内容到/etc/apt/sources.listroot@ubuntu:…

  • baq在聊天中啥意思_baq(网络用语baq啥意思)

    脑龄商数(brain-agequotient)更多释义>>[网络短语]baq块自适应量化,分块自适应量化(blockadaptivequantization),巴兰基亚baqbarranquilla巴兰基亚baq.BAQabbr.脑龄商数(brain-agequotient)应当是bag把,书包的意思BAQ,谁知道beijingassociationof…

  • sql server 字符串转日期_sql server 字符串替换

    sql server 字符串转日期_sql server 字符串替换提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档sqlserver字符串转为日期时间格式使用步骤1.引入库2.读入数据总结使用步骤1.引入库代码如下(示例):importnumpyasnpimportpandasaspdimportmatplotlib.pyplotaspltimportseabornassnsimportwarningswarnings.filterwarnings(‘ignore’)importsslssl._c

  • 蒙特卡洛树搜索 MCTS 入门[通俗易懂]

    蒙特卡洛树搜索 MCTS 入门[通俗易懂]引言  你如果是第一次听到蒙特卡洛,可能会认为这是一个人名。那么你就大错特错,蒙特卡洛不是一个人名,而是一个地方,还一个赌场名!!!但是这不是我们的重点。  我们今天的主题就是入门蒙特卡洛树搜索,这个算法我个人觉得非常神奇也非常有意思。因为前几年AlphaGo就是借助蒙塔卡洛树搜索以及基于深度学习的的策略价值网络击败了人类冠军,赢得了胜利。而今天我们的主角就是蒙特卡洛树搜索它究竟是怎么实现的?它的原理?以及会举出一个例子来告诉大家整个算法的工作流程。一、什么是MCTS?  蒙特卡洛树搜索是一

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号