Question

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

但是，我需要考虑一种实现虚假滚动条的方法。我需要一个实际上不会滚动页面的虚假滚动条，而是在拖动时调用一个函数，这样我就可以将该信息重定向到我的knockoutJS虚拟滚动条以更新tr元素。

我已经看了jScrollPane，但我不确定它是否会支持我想要的东西。有没有其他人有这方面的经验？

感谢。

Answer 1

这是使用实际滚动条和滚动进行的粗略演示。如果您将代码段设置为全屏，则可以更好地查看。

这个想法是你有一个可见项目的窗口，有点像你已经有的，但它在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>

伪造Scrollbars使用JavaScript或jQuery

1 个答案: