实现滚动时仅可视状态下div在.boatFlex2容器内水平移动

我来帮你搞定这个需求！我们需要调整原代码的两个核心问题：仅当目标容器在可视范围内时触发移动，以及严格限制元素在容器边界内移动。下面是修改后的完整实现：

完整代码实现 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="section"></div>
<div id="boatFlex1" class="boatFlex1">
  <div id="boatFlex2" class="boatFlex2">
    <div id="horizontal">test</div>
  </div>
</div>
<div class="section"></div>

CSS #

.section{
  height: 100vh;
  width: 100%;
  background-color: pink;
  position: relative;
}
.boatFlex1{
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  background-color: green;
  justify-content:center;
  align-content: center;
}
.boatFlex2{
  width: 47%;
  height: 100px;
  position: absolute;
  background-color: #090080;
}
#horizontal {
  position: absolute;
  width: 50px;
  background: red;
  left: 0px;
  top: 50%;
  /* 确保元素在容器内垂直居中 */
  transform: translateY(-50%);
}

jQuery 脚本 #

$(document).ready(function () {
  var $horizontal = $('#horizontal');
  var $container = $('.boatFlex2');
  // 预计算容器内可移动的最大距离：容器宽度 - 元素自身宽度
  var maxMoveDistance = $container.width() - $horizontal.width();

  // 辅助函数：判断元素是否处于可视范围内
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.bottom >= 0
    );
  }

  $(window).scroll(function () {
    // 只有当容器在可视范围内时，才执行移动逻辑
    if (!isElementInViewport($container[0])) {
      // 可选：容器不可见时重置元素到初始位置
      $horizontal.css('left', 0);
      return;
    }

    // 计算滚动进度：当前滚动位置 / (文档总高度 - 视口高度)
    var scrollTop = $(this).scrollTop();
    var docHeight = $(document).height();
    var viewportHeight = $(this).height();
    var scrollPercent = scrollTop / (docHeight - viewportHeight);

    // 计算元素目标位置，同时做边界校验防止越界
    var targetPosition = scrollPercent * maxMoveDistance;
    targetPosition = Math.max(0, Math.min(maxMoveDistance, targetPosition));

    $horizontal.css('left', targetPosition);
  });

  // 页面加载时手动触发一次滚动，确保初始位置正确
  $(window).trigger('scroll');
});

关键修改点说明 #

• 可视范围判断：新增isElementInViewport函数，通过getBoundingClientRect()获取容器的视口位置，只有容器出现在屏幕内时才触发移动逻辑，不可见时可选择重置元素位置。
• 严格边界限制：不再基于文档宽度计算移动距离，而是用容器可用宽度（容器宽度-元素宽度）作为最大移动范围，再通过Math.max()和Math.min()做二次校验，彻底避免元素超出容器边界。
• 垂直居中优化：把原top:50px改为top:50%配合transform: translateY(-50%)，让元素在容器内完美垂直居中，适配容器高度变化。
• 初始化触发：页面加载时手动触发滚动事件，确保元素初始位置符合预期。

这样修改后，就能完美实现你想要的效果：滚动页面时，只有蓝色容器出现在屏幕里，红色的#horizontal元素才会在容器内从左到右移动，而且绝对不会超出容器的左右边界~

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