zoukankan      html  css  js  c++  java
  • 移动端获取全文高度

    移动端懒加载需要监听文档高度。以下是提供的所有方法

    网页可见区域宽: document.body.clientWidth
    网页可见区域高: document.body.clientHeight
    网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    网页可见区域高: document.body.offsetHeight (包括边线的高)
    网页正文全文宽: document.body.scrollWidth
    网页正文全文高: document.body.scrollHeight
    网页被卷去的高: document.body.scrollTop
    网页被卷去的左: document.body.scrollLeft
    网页正文部分上: window.screenTop
    网页正文部分左: window.screenLeft
    屏幕分辨率的高: window.screen.height
    屏幕分辨率的宽: window.screen.width
    屏幕可用工作区高度: window.screen.availHeight
    屏幕可用工作区宽度: window.screen.availWidth  //屏幕高度

    然而在移动端有很多都无法使用

    获取屏幕高度使用window.screen.height,//屏幕高度

    使用:document.body.scrollHeight可在手机上获取到实际文档高度,但chrome调试始终获取为0;

    document.documentElement.scrollHeight 在chrome调试上有效,在实际机器上无效

    调试上实际上还是在pc端上,所以很明显document.body无法再pc端上被识别,document.documentElement.scrollHeight无法再移动端上被识别

    若要同时兼容要写函数,但对于监听滚动端的函数来说消耗比较大,目前我还不知道两全的办法

    1. clientHeight和clientWidth用于描述元素内尺寸,是指 元素内容+内边距 大小,不包括边框(IE下实际包括)、外边距、滚动条部分

    2. offsetHeight和offsetWidth用于描述元素外尺寸,是指 元素内容+内边距+边框,不包括外边距和滚动条部分

    3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离,也就是左,上边框宽度

    4. offsetTop和offsetLeft表示该元素的左上角(边框外边缘)与已定位的父容器(offsetParent对象)左上角的距离

    5. offsetParent对象是指元素最近的定位(relative,absolute)祖先元素,递归上溯,如果没有祖先元素是定位的话,会返回null

    补充:我思考了一下,document.documentElement获取的文档根节点,移动端alert也获取的到此对象。那么只能解释并不是document.documentElement在移动端上无法获取到文档高度,而是因为我是用vue开发,且使用过渡需对组件进行定位。

        那么就是

        document.documentElement在移动端上不代表文档高档高度而是根元素高度因为子元素定位所以文档高度不算入定位元素,docuemnt.body则能包含定位元素;

        在pc端上面则相反

  • 相关阅读:
    git 使用详解(6) 撤消操作
    git 使用详解(7) 远程仓库的使用
    git 使用详解(8) 分支HEAD
    PHP抓取网页内容的方法
    PHP的feof()方法需要注意的地方
    PHP获取变量的变量名的一段代码的bug
    关于php的unset
    if、while中变量的作用域问题
    codeigniter的url重写问题(去掉index.php路由)
    PHP书写规范 PHP Coding Standard
  • 原文地址:https://www.cnblogs.com/xiaomingBlog/p/7822937.html
Copyright © 2011-2022 走看看