可滚动的 div 和不可滚动的中间组件 - Javascript

在 Web 开发中，我们常常需要在页面上放置一个可滚动的区域。此时我们通常会选择使用滚动条或者滚轮来实现这个功能。而对于一些需要在这个滚动区域中插入一些不会随着滚动而滚动的组件，我们就需要特别处理了。

在 JavaScript 中，我们可以通过监听滚动事件来判断当前可滚动区域的位置以及状态，并据此来实现中间不可滚动组件的插入。

实现

在 HTML 中，首先我们需要定义一个可滚动区域，并且把需要固定在中间的组件添加进去：

<div class="scrollable">
  <div class="fixed">
    // 中间固定组件
  </div>
  // 在此添加其他可滚动元素
</div>

接着，在 JavaScript 中，我们需要绑定滚动事件并在事件被触发时检测滚动位置：

const scrollable = document.querySelector('.scrollable');
const fixed = document.querySelector('.fixed');

scrollable.addEventListener('scroll', () => {
  if (scrollable.scrollTop >= fixed.offsetTop) {
    // 可滚动区域滚动到了中间固定组件的位置，固定组件需要固定在页面上
    fixed.style.position = 'fixed';
  } else {
    // 可滚动区域还没滚到中间固定组件的位置，固定组件需要跟随滚动
    fixed.style.position = 'static';
  }
});

以上代码逻辑比较简单，当滚动条滚动到了中间固定组件的位置时，我们就把固定组件的定位方式从普通的 static 变成 fixed。这样，即使用户继续向下滚动，固定组件也会一直停留在页面上方，直到用户再拉回来到中间位置。

结语

这是一个比较常见的解决方案，但也有一些问题。例如，如果中间组件高度超过了可滚动区域，用户在滚动时就会看到固定组件被推离中心位置。解决这个问题的方案比较多，例如在滚动到一定位置后直接将滚动区域固定，或者在固定组件上下分别添加占位符等等。具体实现方案根据需求而定。