移动手机浏览器获取窗口高度不准$(window).height()

原创 2021-03-20 本文共3300个字，预计耗時9分钟 772次阅读

文章摘要：今天看到遇到一个很奇怪的情况，一个很常见的功能，在用户翻页的情况下动态加载剩下的列表，原理即使通过监测用户滚动事件，当滚动到页面底部就执行ajax请求新的内容，这个在很多的列表页都是很常见的功能。就是这样一个页面，在PC端chr...

今天看到遇到一个很奇怪的情况，一个很常见的功能，在用户翻页的情况下动态加载剩下的列表，原理即使通过监测用户滚动事件，当滚动到页面底部就执行ajax请求新的内容，这个在很多的列表页都是很常见的功能。就是这样一个页面，在PC端chrome 模拟器和在微信上都能正常运行，可在手机的浏览器上就没有反应。

对于这种在一个平台上效果正常，在另一个平台而效果不佳，肯定是对应的平台终端兼容性。对于前端有太多的兼容性问题，html有，CSS有，JavaScript也有。对于解决上述的问题的思路就是，既然是监听的滚动事件，也是滚动事件里效果差别，那么就是源码里寻找这类的关键词函数。

js监测滚动事件是否滚动到底部，需要弄清几个高度值，文档页面高度，浏览器窗口（可视窗口）的高度，向上滚动距离。这里面的关系就是当向上滚动的距离+浏览器窗口高度= 文档页面高度，即是滚动到底部了。对于这几个参数，也有很多兼容性问题，但是现代浏览器都还好。

对原生JavaScript而言：

document.body.clientHeight  //文档的总高度（页面内容越多越高）
document.documentElement.clientHeight  //窗口的高度（浏览器确定了大小也就确定）
window.innerHeight  //窗口高度（浏览器确定了大小也就确定）

对于jquery而言，更加简单，也更容易理解

$(document).height()  //文档的总高度
$(window).height()  //窗口高度（由浏览器决定）

而向上滚动的距离（jquery）:

$(document).scrollTop()
//或者
$(window).scrollTop()

所以对于滚动到底部通常，网上教程见得多情况使用判断语句，给了10px的空间

if ($(document).scrollTop() + $(window).height() > $(document).height()-10) {
//code
}

结果也正如此，在上述情况里确实发现了上面的代码判断语句，而情况也确实存在在PC端模拟移动端、微信自带浏览器都能正常，而手机浏览器不行。那即是判断语句出现了不兼容，面向百度编程，有人说是因为$(document).scrollTop()的兼容不好，而$(window).scrollTop()绝大部分都支持，尝试了，无效。那没办法使用最笨的方法，将这些值都通通打印出来，看看在各个平台下不同的表现。

下面是测试代码，建立一个1500px的区块，保证可以多余一屏，显示出滚动；

引入https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js，然后 new VConsole();实例化，可以实现在移动端显示出console的信息

<style>
    *{ padding: 0;margin: 0;}
    #sc{height: 1500px;width: 100%; background: red;}
 </style>
</head>
<body>
  <div id="sc" ></div>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
let vConsole = new VConsole();
$(window).on('scroll', function(){
	console.log('$domScroll -' + $(document).scrollTop());
	console.log('$winScroll -' + $(window).scrollTop());
	console.log('$domHight -' + $(document).height());
	console.log('$winHight -' + $(window).height());
	console.log('$wininnerHight -' + $(window).height());
	console.log('domBodyHeight -' + document.body.clientHeight);
	console.log('domElementHeight -' + document.documentElement.clientHeight);
	console.log('wininnerHight -' + window.innerHeight);
	console.log('++++');
});
</script>
</body>

在手机上微信内打开，和使用浏览器（华为自带浏览器）打开，测试发现了问题所在。

微信内部浏览器打开显示，如图，可发现

window.innerHeight，
$(window).height()，
document.documentElement.clientHeight（$(document).height()）
三者的值始终相等。
并且在滚动到最低时，也能注意到
$(document).scrollTop() + $(window).height() = $(document).height()
这个等式也是成立的，

华为自带浏览器打开显示，如下图,会发现：

$(window).height()，
document.documentElement.clientHeight（$(document).height()）的值始终相等
而window.innerHeight会有一个增加的变化

是不是很是奇怪，为什么偏偏在移动端的浏览器window.innerHeight表现了差异性，还是一个尺寸增加的差异。那这个增加的值是从哪里来的呢？

如果你注意现在的手机浏览器都有一个不起眼的小动作，就是在你使用浏览器向下滑动的时候，浏览器顶部会将一小块收起来，一般是URL地址栏。比如华为自带浏览器，下面绿框框的部分（红色是测试的区块），在你下滑的时候这一栏会被向上隐藏，再滑倒顶部时又会显示，就是jquery的hide()和show()的效果。没错，window.innerHeight增加的就是这块的高度值。

到这里，就知道了为何在微信里打开正常，在浏览器中打开不正常了吧，就是因为多了一个隐藏的地址栏高度影响了条件判断。浏览器里滚动到最底部，看下面图各数值知道：

$(window).height()+$(document).scrollTop()=$(document).height()不成立，
而是应该
window.innerHeight+$(document).scrollTop()=$(document).height()

这样在判断上面的if判断语句

if($(window).height()+$(document).scrollTop()>$(document).height()-10){
//code
}

在window.innerHeight-$(window).height()>10（即被隐藏的地址栏高度大于10)的这种状况下是不会成立的，自然不会执行里面的函数，不会去ajax请求内容。

对此今后我们在使用类似的判断滑动到最底部的情况，不要使用$(window).height()或者document.documentElement.clientHeight去获取窗口的高度了，应该用window.innerHeight获取，可以适用各类平台（有伸缩地址栏的也可行），简单的讲就是用下面的判断：

if(window.innerHeight+$(document).scrollTop()>$(document).height()-10){
//code
}

本文地址：https://doc.ydqic.com/3825.html

版权免责申明
① 本站源码模板等资源SVIP用户永久不限量免费下载
② 所有资源来源于网络收集，如有侵权，请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流，请不要用于商业用途，否则后果自负。
④ 如果你有源码需要出售，可以联系管理详谈。
⑤ 本站提供的源码、模板、插件等等资源，都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内，为了大环境的良性发展，请尽可能的选择正版资源。
⑧ 网站资源绝不做任何二次加密或添加后门（原版加密除外）

常见问题F&Q