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


    • pageXOffset, pageYOffset

    浏览器窗口的滚动条位置

    IE8以前的IE浏览器不支持,需要使用document.documentElement.scrollLeft和document.documentElement.scrollTop代替,对于怪异模式,则使用document.body.scrollLeft和document.body.scrollTop。

    窗口对象定义了scrollTo(pageXOffset, pageYOffset)方法,可以设置滚动条的位置,元素对象上没有定义这个方法,但是可以通过设置scrollLeft和scrollTop这两个属性的值达到同样的作用;

    • innerWidth, innerHeight

    浏览器窗口的视口尺寸,同滚动条位置类似,对于 <= IE8的浏览器使用document.documentElement.clientWidth和document.documentElement.clientHeight,对于怪异模式,则使用document.body.clientWidth和document.body.clientHeight。

    innerWith和innerHeight包含滚动条的宽度,也就是说无论是否有滚动条,返回的值都是一致的。

    • getBoundingClientRect()

    返回元素在视口坐标中的位置ClientRect对象,返回结果中包含left, right, top, bottom属性,有些浏览器中实现中还包括width和height。其中包含元素的边框和内边距。

    对于块状元素,此方法返回一个简单的矩形区域的坐标。包含元素的边框和内边距,但是不包括外边距;

    对于行内元素稍微复杂一些,如果行内元素都位于一行,结果与块状元素类似,不过只包含行内元素的内容区域,不计算line-height的值。

    如果行内元素发生了折行,会形成多个矩形区域,而返回结果由这多个矩形区域组合而成。可以看到结果会受line-height属性的影响。

    未标题-2

    注:有关行内元素的line-height的详细说明,请参考这篇文章:深入理解CSS中的行高

    • getClientRects()

    与getBoundingClientRect方法类似,只是返回结果是一个类数组,元素为ClientRect对象

    对于块状元素,返回的类数组中只有一个元素并且与getBoundingClentRect()方法的结果一致。

    对于行内元素,如果元素都位于一行只返回一个元素组成的类数组。

    如果行内元素发生了折行,会返回多个矩形区域组成的类数组。

    • scroll(), scrollTo(), scrollBy(), scrollIntoView();

    scroll()和scrollTo()是两个名字不一样,但是功能都一样的方法,和scrollBy一样,都属于window对象的方法。

    其中scroll和scrollTo方法接受两个参数,x和y坐标。将滚动条移动到对应的位置.

    scrollBy类似,只是采用的是相对坐标,根据当前位置计算需要滚动新位置

    scrollIntoView是定义在元素上的方法,将滚动文档使元素在窗口中可见

    • offsetWidth, offsetHeight

    元素的只读属性,返回元素的尺寸。包含内容,内边距和边框,不包括外边距

    • clientWidth, clientHeight

    与offsetWidth和offsetHeight类似,但是这里只包含内容和内边距,不包含边框和外边距。

    并且如果元素有滚动条,也不包含滚动条占有的空间。

    • scrollWidth, scrollHeight

    在没有出现滚动条时,scrollWidth与clientWidth的值是一致的,都等于内边距加上内容区域的宽度值。

    在出现滚动条时,scrollWidth等于内边距加上内容区域的宽度值,再加上溢出部分的值

    (默认情况下滚动条一般都是出现在元素的右侧和下方,所以只有当内容超出右侧边框时才会出现滚动条,这里讨论的都是overflow为默认值auto的情况)

    • offsetParent

    元素的一个属性,用于定位的祖先元素

    如果值为Null则相对于文档

    对于设置了position为非static的元素A,它的子元素B的offsetParent属性指向这个元素A

    这个属性使得定位元素在逻辑上形成一个链,每个元素的offsetParent都指向最近的一个position为非static的祖先元素,所以通过offsetLeft,offsetTop来计算元素的文档坐标时,需要循环所有的offsetParent元素.

    • offsetLeft, offsetTop

    返回元素的x和y坐标,这里的坐标是相对坐标,相对于offsetParent属性指向的元素。对于offsetParent为null的元素,则相对于文档

    • clientLeft, clientTop

    返回元素的内边距的外边缘到元素边框的外边缘的水平和垂直距离,一般情况下其实就是左边框和上边框的宽度,但是在滚动条出现在左侧和上方时,还需要加上滚动条的宽度。

    • scrollLeft, scrollTop

    元素的滚动条位置,如上面提到的,IE8以前的浏览器如果想要获取窗口对象的滚动条位置,需要使用documentElement或者body元素的这两个属性

    总结:在现代浏览器中,一般使用getBoundingClientRect()就能获得元素的视口坐标,再加上窗口对象的滚动距离可以将视口坐标转换成文档坐标。

  • 相关阅读:
    Laravel Passport token过期后判断refresh_token是否过期
    js 数组随机排序
    jquery的animate关于background-position属性
    css hack 汇整
    顶部导航--向上滚动的时候出现,向下滚动的时候隐藏
    手机端全局样式表整理(mobile)
    AR专用汉明码
    css常用命名规则
    晚11点
    当 IDENTITY_INSERT 设置为 OFF 时,不能为表‘XXX’中的标识列插入显式值。
  • 原文地址:https://www.cnblogs.com/hsnow/p/4210857.html
Copyright © 2020-2023  润新知