Блог

Я пытаюсь сделать так, чтобы набор элементов в контейнере div постоянно присутствовал в окне просмотра. Я попробовал несколько разных подходов, но, похоже, у них есть проблемы с перерисовкой.

Вопрос: Какие-либо серьезные оптимизации для повышения производительности и устранения выделяющихся визуальных побочных эффектов? Если нет, то какие-либо альтернативные подходы?

Первый подход:

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

Это вызывает крошечные эффекты встряхивания, которые очевидны для пользователя.

Второй подход:

• Поместите div ниже и выше содержимого, сжимайте и расширяйте их с помощью небольшой элементарной математики, чтобы заполнить неиспользуемое пространство прокручиваемого контейнера.

Проблема с этим подходом заключалась в том, что он вызывает мерцание по краям содержимого, скорее всего, из-за постоянного изменения размера.

Третий подход:

• Поместите div, который имитирует поведение прокрутки непосредственно над тем местом, где должна была находиться исходная полоса прокрутки, а затем просто привяжите к нему события прокрутки, которые перенаправляют их в фактический контейнер.

Проблема с этим заключается в том, что, поскольку div, который фактически выполняет прокрутку, является поддельным, колесико мыши не будет использоваться, поскольку оно не будет иметь фокуса при наведении курсора на элементы в окне просмотра.

Есть мысли об улучшениях или альтернативных подходах? Это должно быть ориентировано на производительность.

Для этого вам не нужен JavaScript, вы можете сделать это с помощью CSS. Например:

 #viewport { 
    position: relative;
}

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

У Дэвида Уолша есть демонстрационная страница position: fixed in action.