Question

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

我的解决方案可能是我需要重新设计一些东西。截至目前，我的项目是一个十六进制查看器，允许您将二进制文件拖放到它上面。我为每个字节创建html元素。当您最终获得1MB文件（1,000,000 + DOM元素）时，这会导致性能问题。一种解决方案是不使用DOM元素/字节，但我认为这会使其他功能更难，所以我不想一次显示多少DOM元素。

Answer 1

制作div，设置溢出以滚动或自动。当用户滚动时，您可以更改div的内容。您可以查看雅虎邮件（基于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，我正在寻找更多原生的东西。我只是想让它直观地显示滚动的位置，并允许用户通过拖动滚动条来调整滚动位置。

Stackoverflow坚持要粘贴代码，所以这里是上面代码链接链接中的一些代码

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 "infinite" scrolling for finite content?

Answer 4

你正在使用一些严肃的javascript，特别是AJAX和JSON类型的元素。你的问题没有简单的答案。你需要在这个问题上做很多研发。

浏览器中的假滚动条

4 个答案: