假冒瀏覽器中的滾動條

我想爲用戶提供滾動瀏覽內容的體驗，但是我想動態加載內容，以便他們的查看區域中的內容是他們所期望的內容，但是上面沒有數據或低於他們所看到的。出於性能原因，我不希望加載這些數據。因此，當他們向下滾動新數據時，它們將被加載到其視圖中，並且之前在其視圖中的數據將被丟棄。同樣，當滾動。滾動條應該代表它們在整個內容中的位置，所以使用「無限滾動」或「延遲加載」看起來不像我所需要的。假冒瀏覽器中的滾動條

我的解決方案可能是我需要重新構建的東西。截至目前，我的項目是一個十六進制查看器，允許您將二進制文件放到它上面。我爲每個字節創建html元素。當您最終生成1MB文件（1,000,000多個DOM元素）時，會導致性能問題。一種解決方案是不使用DOM元素/字節，但我認爲這會使其他功能更難，所以我想只顯示一次DOM元素。

來源

2012-07-30 0xdabbad00

我可能會錯過它，但我沒有在那裏看到具體的問題。 – Daedalus 2012-07-30 21:31:08

我希望可用於創建假滾動條的選項，或對我正在使用的術語進行更正。 – 0xdabbad00 2012-07-30 21:32:03

你問如何延遲加載exe？ – nycynik 2012-07-30 21:32:14

-1

我認爲避免使用DOM元素/字節對我來說比創建虛假滾動體驗更容易。

更新：我最終解決了這個如下解釋：Javascript "infinite" scrolling for finite content?

來源

2012-07-30 21:47:05 0xdabbad00

-2

你把有關使用一些嚴重的JavaScript，特別是AJAX和JSON類型的元素。你的問題沒有簡單的答案。你需要在這個主題上做很多R & D.

來源

2012-07-30 21:48:35

設置div，將溢出設置爲滾動或自動。當用戶滾動時，您可以更改div的內容。你可以看看雅虎的郵件（基於JavaScript的），看看他們是如何做的（他們在滾動時添加包含電子郵件的行）。

您不一定需要自定義滾動條。

你可以尋找一些代碼在這裏自定義滾動條： http://www.java2s.com/Code/JavaScript/GUI-Components/Scrolltextwithcustomscollbar.htm

或在這裏： http://www.dyn-web.com/code/scroll/

來源

2012-07-30 21:53:21

我正在尋找一個答案，這個問題也讓我將分享我在那裏與它在一起。

我想要垂直顯示大量內容並讓用戶滾動瀏覽它。我可以將它全部加載到DOM中並正常滾動，但是最初的創建階段非常慢，而且滾動也會非常慢。另外，當我流入更多數據時，我會動態地添加它。

所以我希望能夠動態地填充和更新帶有內容的非滾動區域。我想讓它看起來好像用戶正在滾動瀏覽該內容並擁有一個模型（其中包含大量數據），該模型將保留在DOM之外直到它被看到。

我想我會用一個隊列概念來管理可見的DOM元素。我將存儲queueHeadIndex和queueTailIndex來記住DOM中顯示的DOM外部元素。當用戶向下滾動時，我會弄清楚隊列頭部是否脫離屏幕，以及是否更新queueHeadIndex並刪除它的DOM元素。其次，我會確定是否需要更新queueTailIndex並將新元素添加到DOM。對於當前DOM中的元素，我需要將它們移動（不確定它們是否需要動畫或尚未）。

更新：我發現這裏面似乎有一些承諾http://jsfiddle.net/GdsEa/

我現在的想法是，有兩個部分的問題。

首先，我想我想禁用滾動並進行某種虛擬滾動。我剛剛開始爲此尋找http://www.everyday3d.com/blog/index.php/2014/08/18/smooth-scrolling-with-virtualscroll/。這將捕獲所有事件並使我能夠以編程方式調整當前可見的內容等，但瀏覽器實際上不會滾動任何內容。這似乎提供了鼠標滾輪驅動的滾動。

其次，我想我需要顯示一個滾動條。我看了一下http://codepen.io/chriscoyier/pen/gzBsA，我正在尋找更多東西看起來更本土。我只是希望它可以直觀地顯示滾動的位置，並允許用戶通過拖動滾動條來調整滾動位置。

＃1被堅持我將代碼粘貼所以這裏是從codepen鏈接一些代碼上面

var elem = document.getElementById('scroll-area'), 
    track = elem.children[1], 
    thumb = track.children[0], 
    height = parseInt(elem.offsetHeight, 10), 
    cntHeight = parseInt(elem.children[0].offsetHeight, 10), 
    trcHeight = parseInt(track.offsetHeight, 10), 
    distance = cntHeight - height, 
    mean = 50, // For multiplier (go faster or slower) 
    current = 0; 

elem.children[0].style.top = current + "px"; 
thumb.style.height = Math.round(trcHeight * height/cntHeight) + 'px'; 

var doScroll = function (e) { 

    // cross-browser wheel delta 
    e = window.event || e; 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

    // (1 = scroll-up, -1 = scroll-down) 
    if ((delta == -1 && current * mean >= -distance) || (delta == 1 && current * mean < 0)) { 
     current = current + delta; 
    } 

    // Move element up or down by updating the `top` value 
    elem.children[0].style.top = (current * mean) + 'px'; 
    thumb.style.top = 0 - Math.round(trcHeight * (current * mean)/cntHeight) + 'px'; 

    e.preventDefault(); 

}; 

if (elem.addEventListener) { 
    elem.addEventListener("mousewheel", doScroll, false); 
    elem.addEventListener("DOMMouseScroll", doScroll, false); 
} else { 
    elem.attachEvent("onmousewheel", doScroll); 
}

我想我要一個類，監聽或者通過虛擬滾動方式或用戶界面，並滾動事件然後更新ui卷軸和我正在管理的內容的用戶界面。

無論如何，我會更新這個，如果我發現更有用的東西。

來源

2016-06-05 05:39:45 kelceyp

假冒瀏覽器中的滾動條

回答

相關問題