javascript - Javascript:如何检测浏览器窗口是否在Android设备的底部滚动

我正在应用程序中实现延迟加载功能。
它可以在iPhone，桌面和选项卡上正常工作。
但无法在Android手机上使用。
下面是我计算底部的代码-

$(window).on("scroll", function() {
 var scrollHeight, scrollPosition;
 scrollHeight = $(document).height();
 scrollPosition = $(window).height() + $(window).scrollTop();
 if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
    this.get_data();
 }
});

我也尝试了以下选项，但仍然无法计算android的底部。

if($(document).height() - $(window).scrollTop() - $(window).height() < 50) {
   this.get_data();
 }

最佳答案

我认为这是正在发生的事情：

在Android上的Chrome浏览器中向下滚动到文档末尾时，它会隐藏地址栏。这会导致尺寸变化，您不会总是拿起它，因为您没有在听resize事件-只是在听scroll。在我看来，这在浏览器方面是相当愚蠢的。

无论如何：

function update() {
    // ...all your awesome code here
}

$(window).on('resize', update); // look out world, magic happening here
$(window).on('scroll', update);

并且，例如...（我在测试过程中对此进行了一些清理）：

var $status = $('#status');
var $window = $(window);
var $document = $(document);

function update() {
  var maxScrollTop = $document.height() - $window.height();
  var scrollTop = $window.scrollTop();

  var calc = maxScrollTop - scrollTop;

  if (calc < 50) {
    $status.html('Load more!!');
  } else {
    $status.html(calc);
  }
}

$window.on('scroll', update);
$window.on('resize', update);

#content {
  height: 2000px;
  background: #eee;
  box-shadow: inset 0 0 0 1px red;
}

#status {
  position: fixed;
  top: 0; left: 0;
  background: #fff;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>

<div id="content"></div>
<div id="status">Scroll to start</div>

希望有帮助！！