zoukankan      html  css  js  c++  java
  • 关于前端中遇到各种高度宽度的总结

    最近一直在看关于懒加载组件和无限下拉组件的实现,遇到了各种需要获取dom高度、滚动的高度、浏览器可视区的高度...,索性今天对各种高度进行一次总结,省的每次遇到总要找谷哥、度娘。

    element.clientHeight:可视区高度,不包括border的高度,如果底部有滚动条也不包括滚动条的高度

    element.clientWidth可视区宽度,不包括border的宽度,如果有滚动条也不包括滚动条的宽度

    element.offsetHeight:表示自身高度,包括border的值,如果底部有滚动条包括滚动条的高度

    element.offsetWidth表示自身高度,包括border的值,如果有滚动条包括滚动条的宽度

    element.offsetTop:返回元素的垂直偏移位置。

    element.offsetLeft:返回元素的水平偏移位置。

    element.scrollHeight:返回元素的整体高度。

    element.scrollWidth:返回元素的整体高度。

    element.scrollLeft:返回元素左边缘与视图之间的距离。

    element.scrollTop:返回元素上边缘与视图之间的距离。

    element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置:

      获取某个元素的信息(高版本:left,top,bottom,right,width,height)单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
      注意:获取的值是会根据滚动条变化的。

    window.scroolY:window垂直方向上已滚动的距离,一般用 window.pageYOffset代替

    window.scroolX:window水平方向上已滚动的距离,一般用 window.pageXOffset代替

    window.innerHeight:浏览器窗口视口的高度

    window.screen:提供包含有关用户屏幕的信息

    判断滚动元素是否已经滚动到底部

    (element.clientHeight + element.offsetTop)-  element.scrollHeight <= 0

  • 相关阅读:
    【长篇高能】ReactiveCocoa 和 MVVM 入门
    圆形头像
    C#开发学习——.net C#中页面之间传值传参的方法以及内置对象
    C#开发学习——内联表达式
    C#开发学习——ADO.NET几个重要对象
    Android开发学习——动画
    Android开发学习—— Fragment
    Android开发学习—— ContentProvider内容提供者
    Android开发学习—— Service 服务
    Android开发学习—— Broadcast广播接收者
  • 原文地址:https://www.cnblogs.com/voll/p/8434660.html
Copyright © 2011-2022 走看看