Probleme mit horizontalen Scrollen mit jQuery.ScrollTo / jQuery.SerialScroll

Question

Ich versuche, horizontale Scrollen für die Nutzung unserer Website zu entwickeln - jQuery.ScrollTo / jQuery.SerialScroll. Ich bin nicht sicher, ob dies die beste jQuery-Bibliothek ist, das zu tun, aber wenn es etwas besser ist, lassen Sie es mich wissen.

Hier ist das Verhalten, das ich will, Besuche viereckig die „Letzte Aktivität“ -Liste. Die Daten, die von einem Ajax-Request wird aktualisiert wird kommen, dass ich alle paar Sekunden mit window.setInterval machen. Ich bin nicht wirklich ein CSS / Java Script Kerl so dass ich, um herauszufinden, jQuery.SerialScroll in der Lage haben.

Hier ist der Website - Blick auf die "Live-Job Feeds" -Liste. Derzeit ist die Liste, die Daten nicht aktualisiert aus dem Ajax-Aufruf kommen, aber ich nicht die Wirkung, die Animation, in der Tat sehe ich nicht einmal denke serialScroll verwendet wird. Im Moment bin ich dabei ein -.. $ ( '# Feed-Ticker') prepend (Inhalt) vorab append die neu eingetroffenen Daten

Sie können eine Ansicht Quelle tun auf dem aktuellen Code zu suchen.

Jede Hilfe wäre wirklich dankbar. Danke.

Answer 1

$.scrollTo() (und durch Erweiterung die SerialScroll Plugin) stellt die Position der Browser-Scrollbar . Zum Beispiel ist $(document).scrollTo() groß für reibungslos auf Ihrem Dokument an einen anderen Ort zu scrollen. (Sie können natürlich auch einstellen, die Bildlaufposition eines Blockelements mit dem Stil overflow:auto oder overflow:scroll.)

Anglotzen die Website, die Sie verbunden sind, sieht es aus wie sie nicht scrollTo() mit dem animierten neues Element Verhalten zu erreichen. Vielmehr der Stil des umschließenden Blocks wird auf overflow:hidden und die neuen Elemente werden mit einem height von Null erstellt. Einmal in die Seite eingefügt, die Höhe des neuen Artikel wird dann animiert 75px (oder was auch immer). Dies könnte ein besserer Ansatz für Sie zu übernehmen.

content Angenommen ist ein jQuery-Objekt:

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

Magic!