Question

我正在应用程序中实现延迟加载功能。它可以在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();
 }

Answer 1

这就是我想发生的事情：

当您在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>

希望有帮助！

Answer 2

我已经解决了这个问题。实际上逻辑是正确的，没有问题。但是，通过HTML和CSS并了解到我的HTML已损坏，因此我错了scrollTop（）和文档高度。

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

2 个答案: