adjusting container position with scrolling
<p>I am attempting to make it so that a set of elements in a div container constantly are present in the a Viewport. I have tried a couple of different approaches but they seem to have repainting issues.</p>

<p><strong>Question:</strong> Any major optimizations to improve performance and remove the visual side effects that stand out? If not, then any alternative approaches?</p>

<p>First approach:</p>

<pre><code>    $(viewport).scroll(function ()
    {
        m_grid.css({ 'marginTop': viewport.scrollTop() + 'px' });
    })
</code></pre>

<p>This one causes tiny shaking effects that are obvious to the user.</p>

<p>Second approach:</p>

<ul>
<li>Place a div below and above the contents, shrink and expand them with a little rudimentary math to fill the unused space of the scrollable container.</li>
</ul>

<p>Issue with this approach was that it causes flickering at the edges of the content most likely due to the constant resizing.</p>

<p>Third approach:</p>

<ul>
<li>Place a div that mimics the scrolling behavior directly over where the original scrollbar would be then simple bind scrolling events to it that forwards them to the actual container.</li>
</ul>

<p>Issue with this one is that since the div that actually performs the scrolling is a fake, the mouse wheel wouldn't be usable since it would not have focus when hovering over the elements in the viewport.</p>

<p>Any thoughts on improvements or alternate approaches? It has to be performance-centric.</p>
