Я ищу помощь / точку в правильном направлении / или решение для мерцания / прыжка при прокрутке на зацикленном / бесконечном веб-сайте, который можно увидеть в эта скрипка.

То, что, кажется, вызывает скачок, является:

"$(window).scrollTop(half_way - child_height);", а также, что также может быть ошибкой scrollTop в Chrome для Windows, но в настоящее время это происходит во всех браузерах.

Если я удаляю «- child_height», мерцание больше не возникает, но страница больше не прокручивается правильно, что можно увидеть в эта скрипка.

Кроме того, при самой первой прокрутке правый столбец подпрыгивает на три поля - также из-за 'half_way', который я могу исправить, задав ему "bottom: -600px;"

Полный код:

http://jsfiddle.net/djsbaker/j3d8r/1/

var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);

function crisscross() {
    $('#up-left').css('bottom', '-' + window.scrollY + 'px');
    $('#down-right').css('bottom', '-' + window.scrollY + 'px');
    var firstLeft = $('#up-left').children().first();
    var lastLeft = $('#up-left').children().last();
    var lastRight = $('#down-right').children().last();
    var firstRight = $('#down-right').children().first();

    if (window.scrollY > half_way ) {

        $(window).scrollTop(half_way - child_height);
        lastRight.appendTo('#up-left');
        firstLeft.prependTo('#down-right');

    } else if (window.scrollY < half_way - child_height) {

        $(window).scrollTop(half_way);
        lastLeft.appendTo('#down-right');
        firstRight.prependTo('#up-left');
    }
}

$(window).scroll(crisscross);
8
DBUK 30 Янв 2013 в 15:29

4 ответа

Лучший ответ

Хорошо, вот «рабочая» версия - и под «работами» я подразумеваю, что она менее мерцающая, чем раньше , Я думал, что это было без мерцания, и это было, когда я был от батареи, но подключен к сети, и процессор достаточно быстр, чтобы получить мерцание.

Как я уже упоминал, чтобы избавиться от мерцания, вам нужно клонировать объекты, манипулировать ими и затем заменять их в DOM, а не просто манипулировать DOM напрямую.

Я сделал это, получив содержимое <div id="content">, манипулируя им, а затем заменив его на этот

.

Кроме того, это хорошая идея, чтобы найти вещи в DOM только один раз, и с тех пор использовать ссылку на этот объект, а не искать повторно. например

var leftSide = $(clone).find('.up-left');
....
lastRight.appendTo(leftSide);
....
 $(leftSide).css('bottom', '-' + window.scrollY + 'px');

Скорее, чем:

lastRight.appendTo('#up-left');
$('#up-left').css('bottom', '-' + window.scrollY + 'px');

Поиск в DOM относительно медленный, поэтому хранение ссылок может повысить производительность или уменьшить мерцание.

Хранение объекта также облегчает понимание кода (imho), так как вы можете легко увидеть, что вы ссылаетесь на одну и ту же вещь, а не на разные вещи.

5
Danack 2 Фев 2013 в 03:36

Это может быть длинный выстрел, но у меня было то же мерцание при работе с infinitescroll, и в конечном итоге с помощью imagesLoaded. Я добавил дополнительные изображения (теперь загруженные) с постепенным появлением, и это препятствовало тому, чтобы они мерцали из-за факта, что они были загружены.

Так что, возможно, с помощью загруженных изображений - или обратного вызова на изображениях, вы можете решить мерцание. Это уменьшает скорость, хотя. Я могу представить, что если вы хотите прокрутить все как можно быстрее, это может быть не решением. Удачи!

1
Joost 4 Фев 2013 в 15:11

Решением было бы не использовать встроенную функцию прокрутки, а симулировать прокрутку. Это можно сделать, установив overflow вашего контента в значение "hidden", а также перехватывая событие "mousewheel" и вызывая некоторые действия при его вызове. Я начал пробовать это здесь (используя MooTools вместо jQuery, так как я больше с ним не похож ) . В настоящее время он просто «работает» с левой стороны, изменяя поле margin первого элемента.

Мои следующие шаги будут:

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

Это имеет некоторые недостатки, хотя. Имитация прокрутки не так естественна, как встроенная функция прокрутки, и нажатие колесика мыши не работает. Это может быть решаемо, но для нормальной работы потребуется больше кода. В любом случае, в итоге у вас будет решение без мерцания и без липкой полосы прокрутки по бокам (идея для замены может быть небольшой областью сбоку, которая вызывает прокрутку при наведении курсора мыши).

1
YingYang 6 Фев 2013 в 23:08

Я все еще мерцаю хромом на окнах с помощью решения Danack. Для этого сайта я бы контролировал всю прокрутку (вы уже прокручивали вручную одну из сторон) и давал элементам абсолютные позиции.

Или, если вы настаиваете на использовании прокрутки в браузере, возможно, используйте анимацию: анимируйте высоту последних элементов до 0px, затем используйте appendTo, а затем animato от 0px до нормальной высоты ...

1
Hontoni 2 Фев 2013 в 02:05