无限轮播滚动溢出-x

Question

我在这里设置了一个快速小提琴.我想要的是能够无限滚动到左边或右边(旋转木马风格)并且只重复元素(即'脱落'右边缘并重新出现在左边,反之亦然).我能够捕捉到我在滚动中的位置,但不确定在那之后最好的方法是什么.在我尝试动态移动元素的路线之前,在我看来有一个非常简单的技巧.

CSS

#main {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
}

HTML

<div id="main">
    <img src="http://dummyimage.com/150x100/aaa/00f">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/ccc/f00">
</div>

JS

$('#main').scroll(function (event) {
    var width = $(this)[0].scrollWidth - $(this).width();
    console.log('location: ' + $(this).scrollLeft() + ' out of ' + width);
});?

Answer 1

这工作得相当好，滚动条和所有：

$('#main').scroll(function (event) {
    var factor = this.scrollLeft / (this.scrollWidth - $(this).width());
    if(factor < 0.2) {
        var move = $(this.lastChild);
        move.remove();
        $(this).prepend(move);
        this.scrollLeft += move.width();
    } else if(factor > 0.8) {
        var move = $(this.firstChild);
        move.remove();
        $(this).append(move);
        this.scrollLeft -= move.width();
    }
});

jsFiddle：http : //jsfiddle.net/ZgEZN/10/

滚动到滚动条最左边或最右边的 20% 会导致滚动条的行为很有趣，但不会出现严重的故障。（将滚动条拖到该区域会导致轮播快速旋转，直到滚动条被释放或移动到更合理的地方。以其他方式滚动到该区域会导致滚动条向中间跳回。）