jQuery：滚动停止时如何计算高度使自定义滚动元素到底部

你的问题核心是总滚动高度计算错误：你用单个.carousel-item的高度作为滚动总高度，但实际应该取滚动容器自身的scrollHeight属性（容器内所有内容的总高度）。当滚动到底部时，scrollTop的最大值是总内容高度 - 容器可视高度，用这个值计算百分比，才能让.test元素正确滚动到目标位置（你说的85%）。

修正后的代码 #

$('.carousel-items').scroll(function() {
  var $container = $(this);
  var currY = $container.scrollTop();
  var containerHeight = $container.height(); // 容器可视高度
  var totalContentHeight = $container[0].scrollHeight; // 容器内所有内容的总高度
  var maxScrollTop = totalContentHeight - containerHeight; // 最大可滚动距离

  // 内容不足以滚动时，直接设为目标位置
  if (maxScrollTop <= 0) {
    $('.test').css('top', '85%');
    return;
  }

  // 计算滚动百分比，映射到0-85%范围
  var scrollPercent = (currY / maxScrollTop) * 85;
  // 确保百分比不超过85%
  scrollPercent = Math.min(scrollPercent, 85);

  $('.test').css('top', scrollPercent + '%');
});

关键调整点 #

• 替换总高度计算：用$container[0].scrollHeight替代单个.carousel-item的高度，确保获取容器内所有内容的实时总高度，完美适配动态添加的元素
• 边界处理：当内容高度小于容器可视高度时，直接把.test设为目标位置（85%）
• 限制上限：用Math.min确保滚动到底部时，百分比不会超出85%，避免位置异常
• 性能优化：缓存$(this)为$container，减少重复DOM查询

动态内容适配 #

如果.carousel-item是动态添加的，在新元素插入完成后，手动触发一次滚动事件，确保计算基于最新内容高度：

// 动态添加元素后执行
$('.carousel-items').trigger('scroll');

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