用滚动调整容器位置

Question

我正在尝试使它在div容器中的一组元素始终存在于视口中。我尝试了几种不同的方法，但他们似乎有重新绘制问题。

问题：任何主要的优化，以提高性能和消除突出的视觉副作用？如果不是，那么还有其他方法吗？

第一种方法：

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

这一个小小的引起震动效应是显而易见的用户。

第二种方法：

• 广场下方，上面的内容股利，缩小和扩大他们一点点基本的数学填补滚动容器的未使用空间。

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

第三种方法：

• 将直接在这里原来的滚动条会那么简单绑定滚动事件它，并将其转发到实际的容器模仿滚动行为股利。

问题在于，由于实际执行滚动的div是假的，鼠标滚轮将不可用，因为它在鼠标悬停在视口中的元素上时没有焦点。

有关改进或替代方法的任何想法？它必须以性能为中心。

Answer 1

你不需要JavaScript就能做到这一点，你可以用CSS来做到这一点。例如：

#viewport { 
    position: relative; 
} 

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

大卫·沃尔什已经在行动position: fixed一个demo page。