假冒浏览器中的滚动条

我想为用户提供滚动浏览内容的体验，但是我想动态加载内容，以便他们的查看区域中的内容是他们所期望的内容，但是上面没有数据或低于他们所看到的。出于性能原因，我不希望加载这些数据。因此，当他们向下滚动新数据时，它们将被加载到其视图中，并且之前在其视图中的数据将被丢弃。同样，当滚动。滚动条应该代表它们在整个内容中的位置，所以使用“无限滚动”或“延迟加载”看起来不像我所需要的。假冒浏览器中的滚动条

我的解决方案可能是我需要重新构建的东西。截至目前，我的项目是一个十六进制查看器，允许您将二进制文件放到它上面。我为每个字节创建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

假冒浏览器中的滚动条

回答

相关问题