проблемы с горизонтальной прокруткой с использованием jQuery.ScrollTo / jQuery.SerialScroll - PullRequest
Новая
       29

проблемы с горизонтальной прокруткой с использованием jQuery.ScrollTo / jQuery.SerialScroll

1 голос
/ 07 мая 2010

Я пытаюсь разработать автоматическую горизонтальную прокрутку для нашего сайта, используя - jQuery.ScrollTo / jQuery.SerialScroll. Я не уверен, что это лучшая библиотека jquery, но если есть что-то лучше, пожалуйста, дайте мне знать.

Вот поведение, которое я хочу, посмотрите foursquare «Недавние действия». Данные, которые будут обновлены, будут получены из запроса ajax, который я делаю каждые несколько секунд, используя window.setInterval. Я на самом деле не парень по CSS / java-скриптам, поэтому я не смог понять jQuery.SerialScroll.

Вот веб-сайт - посмотрите список «Прямые трансляции». В настоящее время список обновляет данные, поступающие от вызова ajax, но я не вижу эффекта, анимации, на самом деле я даже не думаю, что используется serialScroll. Сейчас я делаю - $ ('# feed-ticker'). Prepend (content) для предварительного добавления вновь поступивших данных.

Вы можете сделать исходный код для просмотра текущего кода.

Любая помощь будет очень признательна. Спасибо.

1 Ответ

0 голосов
/ 07 мая 2010

$.scrollTo() (и, соответственно, плагин SerialScroll) регулирует положение полосы прокрутки браузера . Например, $(document).scrollTo() отлично подходит для плавной прокрутки в другое место документа. (Конечно, вы также можете отрегулировать положение прокрутки элемента блока в стиле overflow:auto или overflow:scroll.)

Наблюдая за сайтом, на который вы ссылаетесь, похоже, что они не используют scrollTo() для достижения анимированного поведения нового элемента. Вместо этого стиль содержащего блока установлен на overflow:hidden, а новые элементы создаются с height, равным нулю. После вставки на страницу высота нового элемента анимируется до 75 пикселей (или чего-либо еще). Это может быть лучший подход для вас.

Предполагается, что content является объектом jQuery: 

content.height(0);
$('#feed-ticker').prepend(content);
content.animate({
    height: 75 // or whatever your target height is
}, 500); // animation's duration in milliseconds

Magic!

...