Дрожание Skrollr и скачки на абсолютном позиционировании

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

Я использовал абсолютную позицию для элементов и безуспешно сделал тело skrollr абсолютной позицией.

Кроме того, я установил для плавной прокрутки значение false, так как анимация между кадрами также очень отвлекала.

У кого-нибудь была эта проблема?

вот ссылка на сайт в его нынешнем виде http://www.littleluxury.co.za и рабочий стол дрожит при прокрутке.

Если кто-то может просветить меня, почему примеры, которые я видел, гладкие и гладкие, а мои выглядят так, я был бы очень признателен.


javascript html jquery css skrollr
person Neil Bothma    schedule 23.12.2013    source источник
comment
Опубликуйте код, который вы используете, чтобы мы могли попытаться исправить его или создать скрипку.   -  person man    schedule 23.12.2013
comment
Это огромное количество кода для публикации - я пробовал его в Firefox, и он гладкий, как шелк, кажется, это проблема с хромом и сафари. Возможно, это проблема масштабирования при дальнейшем расследовании.   -  person Neil Bothma    schedule 23.12.2013

Ответы (3)


arrow_upward
4
arrow_downward

Вы прокручиваете вниз -> элементы перемещаются вверх, потому что они находятся в потоке документа -> запускается следующий цикл анимации skrollr (несколько мс позже) -> он перемещает элементы в другое положение из-за вашей анимации

Я предлагаю закрепить элементы и использовать translate() для их перемещения.

person Prinzhorn    schedule 23.12.2013

arrow_upward
3
arrow_downward

добавить это в Div

 <div data-smooth-scrolling="off">

должно быть лучше потом

person sabatino    schedule 23.12.2013
comment
Я добавил его к независимым элементам, а также к #skrollr-body и все еще испытываю дрожание в хроме. Обычно у меня есть настройка smoothScroll: false в инициализации skrollr непосредственно перед тегом ‹/body›. Это просто для того, чтобы избавиться от анимации между переходами. Настоящей проблемой являются прыжки, которые происходят в хроме и сафари. Как я уже говорил, у Firefox нет проблем с идеальным отображением этого скролла. Это должно быть что-то, что и сафари, и хром интерпретируют неправильно. - person Neil Bothma; 23.12.2013
comment
Он работает в Chrome и Safari, но не работает в Firefox. есть хаки? - person BadJohnny; 25.06.2020

arrow_upward
2
arrow_downward

Да! Я искал ответ уже несколько дней, и background-attachment:fixed — это ответ! После этого требуется небольшая настройка, чтобы заставить его прокручиваться в правильном направлении, но это не имеет большого значения.

См. http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website за хороший, подробный учебник, который плавно прокручивается и использует технику фиксированного фона.

person Adrian Pauly    schedule 10.05.2014