javascript - 通过滚动调整容器位置

Question

我正在尝试使 div 容器中的一组元素不断出现在视口(viewport)中。我尝试了几种不同的方法，但它们似乎存在重新绘制问题。

问题:是否有任何重大优化来提高性能并消除突出的视觉副作用？如果没有，那么还有其他方法吗？

第一种方法:

    $(viewport).scroll(function ()
    {
        m_grid.css({ 'marginTop': viewport.scrollTop() + 'px' });
    })

这会引起用户明显的微小震动效果。

第二种方法:

• 在内容的下方和上方放置一个 div，通过一些基本的数学运算来缩小和展开它们，以填充可滚动容器的未使用空间。

这种方法的问题是，它会导致内容边缘闪烁，很可能是由于不断调整大小所致。

第三种方法:

• 将一个模仿滚动行为的 div 直接放置在原始滚动条的位置上，然后简单地将滚动事件绑定(bind)到它，将它们转发到实际容器。

这个问题的问题是，由于实际执行滚动的 div 是假的，因此鼠标滚轮将无法使用，因为当鼠标悬停在视口(viewport)中的元素上时它不会获得焦点。

对改进或替代方法有什么想法吗？它必须以性能为中心。

Answer 1

您不需要 JavaScript 来完成此操作，您可以使用 CSS 来完成。例如:

#viewport { 
    position: relative;
}

#m_grid {
    position: fixed;
    top: 0px;
}

大卫·沃尔什有一个 demo page 位置:固定在行动中。