在移动设备上使用 .scrollTop 动画不起作用答案

【问题标题】：Using .scrollTop animation with mobile device not working在移动设备上使用 .scrollTop 动画不起作用
【发布时间】：2015-07-14 18:08:59
【问题描述】：

当用户向下滚动页面底部时，我有一个页脚，但出于某种原因，它似乎不适用于移动设备，尤其是 ipad，并且在那里看起来很挑剔。有时有效，有时无效，而且只有在垂直使用 ipad 时才有效。

<script type="text/javascript">
var $window = jQuery(window);
var   $document = jQuery(document);
var  footer = jQuery('.footer');

footer.css({opacity: 0});

$window.on('scroll', function() {
  if (($window.scrollTop() + $window.innerHeight()) == $document.height()) {
    footer.stop(true).animate({opacity: 1}, 250);
  } 
  else {
    footer.stop(true).animate({opacity: 0}, 250);
  }
});
</script>

只是在页面底部淡入淡出。我环顾四周，似乎有几种方法可以做到这一点，我想知道最有效的解决方案。

我以为我不久前找到了一个解决方案的 jfiddle，但似乎再也找不到那个问题了，这需要我进行大量研究。

我不确定移动设备与我目前拥有的解决方案不兼容的所有因素，因此我很难确定需要调整的地方。谢谢。

【问题讨论】：

标签： javascript jquery mobile viewport infinite-scroll

【解决方案1】：

实际上发现问题是，如果我使用“==”，它需要是准确的文档高度，在移动设备中，视点在移动或滚动时不会触发脚本，所以我没有更改“ ==' 到 '>=' 在我的条件下，然后将高度添加到我的视口。

if (($window.scrollTop() + $window.innerHeight()) >= $document.height())

在我的标题视口标签中

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

而且效果很好！

【讨论】：