使用 jQuery.ScrollTo / jQuery.SerialScroll 的水平滚动问题

发布于 2024-08-31 19:08:09 字数 563 浏览 9 评论 0原文

我正在尝试使用 jQuery.ScrollTo / jQuery.SerialScroll 为我们的网站开发自动水平滚动。我不确定这是否是最好的 jquery 库，但如果有更好的东西，请告诉我。

这是我想要的行为，请查看 foursquare 的“最近活动”列表。将刷新的数据来自我使用 window.setInterval 每隔几秒发出的 ajax 请求。我不是一个真正的 CSS/java 脚本专家，所以我无法弄清楚 jQuery.SerialScroll。

这是网站 - 查看“实时工作源”列表。目前列表确实刷新了来自ajax调用的数据，但我没有看到效果，动画，事实上我什至不认为serialScroll正在被使用。现在我正在做 - $('#feed-ticker').prepend(content) 来预先附加新到达的数据。

您可以执行查看源代码来查看当前代码。

任何帮助将不胜感激。谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嗫嚅 2024-09-07 19:08:09

$.scrollTo()（以及扩展的 SerialScroll 插件）调整浏览器滚动条的位置。例如，$(document).scrollTo() 非常适合平滑滚动到文档上的不同位置。 overflow:auto 或 overflow:scroll 样式调整块元素的滚动位置。）

（当然，您还可以使用看起来他们没有使用 scrollTo() 来实现动画新项目行为。相反，包含块的样式设置为 overflow:hidden，并且创建的新项目的 height 为零。一旦插入到页面中，新项目的高度就会动画化为 75px（或其他值）。这可能是您采取的更好方法。

假设 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！

$.scrollTo() (and by extension, the SerialScroll plugin) adjusts the position of the browser's scrollbar. For example, $(document).scrollTo() is great for smoothly scrolling to a different spot on your document. (You can, of course, also adjust the scroll position of a block element with the style overflow:auto or overflow:scroll.)

Eyeballing the site you linked to, it looks like they're not using scrollTo() to achieve the animated new item behavior. Rather, the containing block's style is set to overflow:hidden and the new items are created with a height of zero. Once inserted in to the page, the new item's height is then animated to 75px (or whatever). This might be a better approach for you to take.

Assuming content is a jQuery object:

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

Magic!

回复收藏 0 原文

~没有更多了~