双元素单滚动条实现：元素均不超出视平面需求

我来帮你搞定这个需求！你想要实现的是：当容器滚动时，主内容区和侧边栏中高度较小的那个，在滚动到容器底部后就固定住不再移动，而高度较大的那个继续跟随滚动。下面是完整的实现方案，包含HTML、CSS和JavaScript代码，还有详细的逻辑解释：

核心思路是通过绝对定位结合滚动位置判断，让元素在三个状态间切换：

1. 正常流状态：元素还没被滚动到容器顶部之外，保持原本的布局位置。
2. 顶部固定状态：元素被滚动出容器顶部，此时将其绝对定位在容器顶部，跟随滚动。
3. 底部固定状态：当元素底部即将碰到容器底部时，将其绝对定位在容器底部，停止跟随滚动。

HTML #

<div class="body">
  <div class="mainContent">
    <h2>主内容区</h2>
    <p>主内容文本内容...（可以重复多段让高度变化）</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
    <p>主内容文本内容...</p>
  </div>
  <div class="sidebar">
    <h2>侧边栏</h2>
    <p>侧边栏文本内容...</p>
    <p>侧边栏文本内容...</p>
    <p>侧边栏文本内容...</p>
  </div>
  <div style="clear: both;"></div>
</div>

CSS #

.body {
  position: relative;
  height: 800px;
  overflow: auto;
  border: 1px solid #ddd;
  padding: 20px;
}

.mainContent {
  width: 60%;
  float: left;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
}

.sidebar {
  width: 35%;
  float: right;
  background-color: #e8e8e8;
  padding: 20px;
  box-sizing: border-box;
}

JavaScript #

$(document).ready(function() {
  const $container = $(".body");
  const $main = $(".mainContent");
  const $sidebar = $(".sidebar");

  // 初始化获取关键参数
  let mainInitialTop, mainHeight;
  let sidebarInitialTop, sidebarHeight;
  let containerHeight, containerScrollHeight;

  function calculateParams() {
    const containerOffset = $container.offset().top;
    mainInitialTop = $main.offset().top - containerOffset;
    mainHeight = $main.outerHeight();
    sidebarInitialTop = $sidebar.offset().top - containerOffset;
    sidebarHeight = $sidebar.outerHeight();
    containerHeight = $container.height();
    containerScrollHeight = $container[0].scrollHeight;
  }

  // 初始化计算一次
  calculateParams();

  // 滚动事件处理
  $container.scroll(function() {
    const scrollTop = $(this).scrollTop();

    // 处理主内容区的定位
    if (scrollTop >= mainInitialTop) {
      // 判断是否到达容器底部边界
      const bottomThreshold = containerScrollHeight - mainHeight;
      if (scrollTop >= bottomThreshold - containerHeight + mainHeight) {
        $main.css({
          position: "absolute",
          bottom: 0,
          top: "auto",
          left: $main.css("left")
        });
      } else {
        $main.css({
          position: "absolute",
          top: 0,
          bottom: "auto",
          left: $main.css("left")
        });
      }
    } else {
      $main.css({ position: "static" });
    }

    // 处理侧边栏的定位
    if (scrollTop >= sidebarInitialTop) {
      const bottomThreshold = containerScrollHeight - sidebarHeight;
      if (scrollTop >= bottomThreshold - containerHeight + sidebarHeight) {
        $sidebar.css({
          position: "absolute",
          bottom: 0,
          top: "auto",
          left: $sidebar.css("left")
        });
      } else {
        $sidebar.css({
          position: "absolute",
          top: 0,
          bottom: "auto",
          left: $sidebar.css("left")
        });
      }
    } else {
      $sidebar.css({ position: "static" });
    }
  });

  // 窗口大小变化时重新计算参数
  $(window).resize(function() {
    calculateParams();
    $container.scroll(); // 触发滚动事件更新元素位置
  });

  // 初始触发一次滚动事件，确保位置正确
  $container.scroll();
});

1. 参数初始化：通过calculateParams函数获取元素相对于容器的初始顶部偏移、元素高度、容器的可视高度和总滚动高度，这些参数是判断元素定位状态的关键。
2. 滚动事件逻辑：
   • 当容器滚动距离超过元素初始顶部偏移时，元素进入固定状态。
   • 计算元素底部到达容器底部的阈值：当滚动距离达到containerScrollHeight - 元素高度 - (容器可视高度 - 元素高度)时，说明元素即将碰到容器底部，此时将元素绝对定位在容器底部。
   • 如果滚动距离小于元素初始顶部偏移，元素回到正常流布局。
3. 窗口适配：监听窗口大小变化事件，重新计算所有参数并触发滚动事件，确保布局在窗口大小改变后依然正常工作。

这样就能实现你想要的效果：不管主内容区和侧边栏哪个高度更高，较矮的那个会先停在容器底部，不再跟随滚动，而较高的那个继续滚动直到容器底部。

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