zoukankan      html  css  js  c++  java
  • js中scrollLeft、scrollWidth、offsetTop等相关位置属性的理解(转)

    1.常见的事件位置属性

    e.pageX——相对整个页面的坐标

    注意:IE6、IE7、IE8无该属性

    e.layerX——相对当前坐标系的border左上角开始的坐标

    注意:在opera、IE6、IE7、IE8中这个属性,而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离

    e.offsetX——相对当前坐标系的border左上角开始的坐标

    注意:火狐中无该属性

    e.clientX——相对可视区域的坐标

    e.x——相对可视区域的坐标

    注意:火狐中无该属性

    2.pageX和clientX

    pageX指鼠标在页面上的位置,以页面左侧为参考点

    clientX指可视区域内离左侧的距离,以滚动条滚动到的位置为参考点。各个浏览器相同。

    即当有滚动条时clientX 小于 pageX

    //ie6、7、8不识别pageX

    PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)

    页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度

    3.screenX

    鼠标在屏幕中的位置,指的是鼠标到电脑屏幕左侧的距离。 各个浏览器相同。

    与clientX的区别是clientX是到浏览器的距离。

    例如:当网页缩小,拖动到屏幕中间时,screnX 大于 clientX

    4、offsetX和layerX

    为了兼容浏览器,layerX是FF、chrome识别,offsetX是除了FF之外。

    如果触发元素设置了position,则offsetX等于layerX

    如果页面有滚动条,添加滚动的距离。

    layerX:FF特有,是相对于父元素的位置,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了positio的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。

    offsetX:IE特有,鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便,FF没有直接替换的属性。

    5.e.x

    到可视区域的距离,FF不识别,有无滚动条相同,同clientX。

      opera,chrome和safari的event.x返回值和event.clientX相同。
    
      IE8、9、10的event.x返回值和event.clientX相同。
    
      ie7的e.x比e.clientX少2px。
    

    注意:以上仅以X为例,有X的属性就有对应的Y属性,例如:e.pageX和e.pageY,他们是成对存在的。

    6.offset详解

    这里写图片描述

    scrollHeight: 获取对象的滚动的高度。

    scrollWidth:获取对象的滚动的宽度

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离,即被卷起的宽度

    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离,即被卷起的高度

    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度(包括border),即对象本身高+border上下宽度

    offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度(包括border),即对象本身宽度+border左右宽度

    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,即相对于父元素的左位移

    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置,即相对于父元素的上位移

    event.clientX: 相对文档的水平座标,即相对于可视区域的水平坐标

    event.clientY: 相对文档的垂直座标,即相对于可视区域的垂直坐标

    event.offsetX: 相对容器的水平坐标,即相对于父元素的水平坐标

    event.offsetY: 相对容器的垂直坐标,即相对于父元素的垂直坐标

    clientWidth:对象相对于网页可见区域的宽度

    clientHeight:对象相对于网页可见区域的高度

  • 相关阅读:
    使用Vue初始化项目的时候,一直download template的解决方案
    移动端复选框和单选框选中样式不能正常显示
    PC端360浏览器如何打开手机模式
    我在项目中是这样配置Vue的
    怎么取消微信pc端“保持微信窗口在最前面”设置?
    5个 Vuex 插件,给你的下个VueJS项目
    Vue+Element前端导入导出Excel
    前端快来!最火的 Vue.js 开源项目出炉
    1月12日学习日志
    1月9日学习日志
  • 原文地址:https://www.cnblogs.com/xingyue1988/p/6531296.html
Copyright © 2011-2022 走看看