使用 JavaScript 或 jQuery 伪造滚动条

Question

我目前正在制作一个使用 knockoutJS 和 jQuery 制作的自定义表格。因为该表可能处理 1,000 - 100,000 行，所以我在 KnockoutJS 中实现了自己的虚拟滚动技术，以确保一次只能看到 35 个左右的元素（取决于视口高度）。当使用滚轮滚动时，表格的 tr 元素会在原地动态更新以产生滚动的错觉。这很有效。

但是，我需要想办法实现假滚动条。我需要一个假滚动条，它实际上并不滚动页面，而是在拖动时调用一个函数，以便我可以将该信息重定向到我的 knockoutJS 虚拟滚动条以更新 tr 元素。

我对@9​​87654321@ 进行了一些研究，但不确定它是否支持我想要的。其他人有这方面的经验吗？

谢谢。

Answer 1

这是一个使用实际滚动条和滚动的粗略演示。如果你把 sn-p 设为全屏，你会看得更清楚。

这个想法是你有一个可见项目的窗口，有点像你已经拥有的，但它显示在一个高大的滚动窗口上方的fixed 位置。当窗口滚动时，您会找到它的新位置并使用它来重新计算哪些项目应该是可见的。

因为它在这里，我不得不加入一个软糖因素才能到达列表中的最后一个项目。我确实说过这是一个“粗略”的演示。

const vm = {
  items: ko.observableArray([]),
  percent: ko.observable(0),
  visibleItems: ko.pureComputed(() => {
    const start = Math.floor(vm.percent() * vm.items().length);

    return vm.items.slice(start, start + 22);
  })
};

for (let i = 0; i < 5000; ++i) {
  vm.items.push(i);
}

ko.bindingHandlers.scroll = {
  init: (el, va) => {
    let top = el.parentNode.scrollTop;
    const percent = va();

    setInterval(() => {
      const newTop = el.parentNode.scrollTop;

      if (newTop !== top) {
        percent(newTop / (0.859 * el.parentNode.scrollHeight));
        top = newTop;
      }

    }, 50);
  }
};

ko.applyBindings(vm);

.scroll-me {
  background-color: rgba(255, 30, 30, 0.3);
  height: 3000px;
}
.all-you-see {
  background-color: white;
  width: 100%;
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="scroll-me" data-bind="scroll: percent">
  <div class="all-you-see">
    <div data-bind="foreach:visibleItems">
      <div data-bind="text:$data"></div>
    </div>
  </div>
</div>