scrollTop在移动设备不生效，滚动到页脚移动div的代码移动端失效如何解决

• 视口高度计算偏差：移动端浏览器的地址栏、工具栏会在滚动时动态收起/展开，$(window).height() 会随之变化，导致scrollTop + windowHeight 很难刚好匹配$(document).height()的全等判断条件。
• 滚动回弹（橡皮筋效果）影响：iOS等移动端系统自带滚动回弹效果，滚动到页面底部时scrollTop会出现超出实际文档高度的浮点值，全等判断完全无法触发。
• 滚动容器不匹配：部分页面如果给<html>、<body>设置了overflow: auto或者height: 100%之类的样式，实际滚动的容器不是window而是根元素，此时监听window的scroll事件、读取$(window).scrollTop()自然无效。
• 精度问题：移动端滚动过程中scrollTop返回的可能是带小数的浮点值，和文档高度的整数做全等判断也会失败。

首先调整判断逻辑，替换全等判断为带容差的模糊判断，同时兼容移动端的滚动属性读取、增加触摸事件监听，修改后代码如下：

$(document).ready(function(){
  // 兼容多端获取滚动高度
  function getScrollTop() {
    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  }
  // 兼容多端获取窗口可视高度，规避地址栏伸缩带来的取值误差
  function getWindowHeight() {
    return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
  }
  // 兼容获取文档实际总高度
  function getDocumentHeight() {
    return Math.max(
      document.body.scrollHeight,
      document.documentElement.scrollHeight,
      document.body.offsetHeight,
      document.documentElement.offsetHeight,
      document.body.clientHeight,
      document.documentElement.clientHeight
    );
  }

  // 同时监听scroll和touchmove事件适配移动端触摸滚动场景
  $(window).on('scroll touchmove', function () { 
    const scrollTop = getScrollTop();
    const windowHeight = getWindowHeight();
    const documentHeight = getDocumentHeight();
    // 预留5px容差，规避浮点精度、回弹、视口变化带来的判断失效问题
    if (scrollTop + windowHeight >= documentHeight - 5) {
      $('.publicar-btn').stop(true).animate({
        bottom: 150
      }, 250);
    } else {
      $('.publicar-btn').stop(true).animate({
        bottom: 30
      }, 200);
    }
  });
});

额外适配说明 #

• 如果修改后仍不生效，先检查<html>、<body的样式，如果设置了height: 100%、overflow: auto，将监听对象从$(window)改为$('html, body')即可。
• iOS端如果回弹效果仍干扰判断，可添加样式body { overscroll-behavior-y: none; }关闭默认页面回弹。

内容的提问来源于stack exchange，提问作者solisdonoso19