在浏览器中假滚动条

Question

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

我的解决方案可能是我需要重新架构架构。 到目前为止，我的项目是一个十六进制查看器，可让您将二进制文件拖放到其上。 我为每个字节创建html元素。 当您最终获得1MB文件（1,000,000+个DOM元素）时，这将导致性能问题。 一种解决方案是不使用DOM元素/字节，但是我认为这会使其他功能变得更难，因此我只想一次不显示多个DOM元素。

Answer 1

进行div设置，将溢出设置为滚动或自动。 当用户滚动时，您可以更改div的内容。 您可以查看yahoo邮件（基于JavaScript的邮件）以了解其操作方式（滚动时会在其中添加带有电子邮件的行）。

您不一定需要自定义滚动条。

您可以在此处查找一些用于自定义滚动条的代码： http : //www.java2s.com/Code/JavaScript/GUI-Components/Scrolltextwithcustomscollbar.htm

或此处： http : //www.dyn-web.com/code/scroll/

Answer 2

我也在寻找这个问题的答案，所以我将分享我的看法。

我有一个大量的内容我想纵向显示，并通过它让用户滚动。 我可以将其全部加载到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 ，我摸索更多的东西，看起来更天然。 我只是希望它直观地显示在滚动，并允许用户通过拖动滚动条来调整滚动位置。

计算器是坚持我所以这里贴的代码是从上面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侦听滚动事件，然后更新ui滚动器和我正在管理的内容的ui。

无论如何，如果发现更多有用的信息，我将进行更新。

Answer 3

我认为避免使用DOM元素/字节将比创建假的滚动体验更容易。

更新 ：我最终解决了此问题，如下所述： Javascript“无限”滚动显示有限内容？

Answer 4

您正在考虑使用一些严肃的javascript，特别是AJAX和JSON类型元素。 您的问题没有简单的答案。 您需要在该主题上进行大量研发。