使用JavaScript或jQuery僞造滾動條

我目前正在使用knockoutJS和jQuery製作的自定義表。由於該表格可能會處理1,000到100,000行，因此我在KnockoutJS中實施了自己的虛擬滾動技術，以確保一次只能看到35個左右的元素（取決於視口高度）。當使用滾輪滾動時，表格的tr元素會在原地動態更新以產生滾動幻覺。這很有用。使用JavaScript或jQuery僞造滾動條

但是，我需要考慮一種實現假滾動條的方法。我需要一個不真正滾動頁面的虛假滾動條，而是在拖動時調用一個函數，以便我可以將該信息重新指向我的knockoutJS虛擬滾動條以更新tr元素。

我已經看了一下jScrollPane，但不知道它是否會支持我想要的。有沒有其他人有這方面的經驗？

感謝。

來源

2016-07-26 James Manes

下面是使用實際滾動條和滾動進行粗略演示。如果您將代碼片段全屏顯示，您可以更好地看到它。

這個想法是，你有一個可見項目的窗口，有點像你已經，但它顯示在一個高大的滾動窗口上的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>

來源

2016-07-26 21:54:21

我明白你在說什麼。我會用這個嘗試一些東西，並將它標記爲正確的，如果它將我引向解決方案。 –

使用JavaScript或jQuery僞造滾動條

回答

相關問題