水平自动滚动 div 到最后,将 overflow-y 设置为滚动 (jQuery)
Auto-Scroll div horizontally to the very end with overflow-y set to scroll (jQuery)
我正在使用这个 jQuery 脚本,它会根据 div 的宽度自动水平滚动 div 。但是我需要它根据 div 内部内容 的 结尾滚动到 div 的最后。 div 有一个 'overflow-y: scroll' 属性,所以我希望它 滚动 浏览所有内容,直到它到达结尾。
这是我目前使用的脚本:
function animatethis(targetElement, speed) {
var width = $(targetElement).width();
$(targetElement).animate({ marginLeft: "-="+width},
{
duration: speed,
complete: function ()
{
targetElement.animate({ marginLeft: "+="+width },
{
duration: speed,
complete: function ()
{
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#q1'), 5000);
它会滚动,但不会滚动到 div 中内容的最后。这是一个显示我的意思的 jFiddle:
http://jsfiddle.net/rKu6Y/535/
我怎样才能让它水平自动滚动到内容的末尾,而不仅仅是 div 的宽度?
我希望这一切都有意义。谢谢
您可以使用 scrollWidth
和 clientWidth
为 scrollLeft
属性 设置动画:
function animatethis(targetElement, speed) {
var scrollWidth = $(targetElement).get(0).scrollWidth;
var clientWidth = $(targetElement).get(0).clientWidth;
$(targetElement).animate({ scrollLeft: scrollWidth - clientWidth },
{
duration: speed,
complete: function () {
targetElement.animate({ scrollLeft: 0 },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#q1'), 5000);
结果可以看这个jsfiddle.
我正在使用这个 jQuery 脚本,它会根据 div 的宽度自动水平滚动 div 。但是我需要它根据 div 内部内容 的 结尾滚动到 div 的最后。 div 有一个 'overflow-y: scroll' 属性,所以我希望它 滚动 浏览所有内容,直到它到达结尾。
这是我目前使用的脚本:
function animatethis(targetElement, speed) {
var width = $(targetElement).width();
$(targetElement).animate({ marginLeft: "-="+width},
{
duration: speed,
complete: function ()
{
targetElement.animate({ marginLeft: "+="+width },
{
duration: speed,
complete: function ()
{
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#q1'), 5000);
它会滚动,但不会滚动到 div 中内容的最后。这是一个显示我的意思的 jFiddle: http://jsfiddle.net/rKu6Y/535/
我怎样才能让它水平自动滚动到内容的末尾,而不仅仅是 div 的宽度?
我希望这一切都有意义。谢谢
您可以使用 scrollWidth
和 clientWidth
为 scrollLeft
属性 设置动画:
function animatethis(targetElement, speed) {
var scrollWidth = $(targetElement).get(0).scrollWidth;
var clientWidth = $(targetElement).get(0).clientWidth;
$(targetElement).animate({ scrollLeft: scrollWidth - clientWidth },
{
duration: speed,
complete: function () {
targetElement.animate({ scrollLeft: 0 },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#q1'), 5000);
结果可以看这个jsfiddle.