jQuery animate scrollLeft 在 FF 和 Chrome（但不是 Safari）中点击几次后停止工作

Question

我有一个非常奇怪的问题，一些 jquery 滚动一组图像的代码。它似乎在所有浏览器中都适用于前几次点击，将图像推进一个数字。在 Safari 中，它将一直完美运行到幻灯片结束。但在 FF 和 Chrome 中它会在一定数量的图像后停止。由于某种原因，这个数字并不总是相同的。

例如，在this页面上FF/Chrome将在点击下一个箭头7次后停止。

而在this页面，FF/Chrome会在点击下一个箭头6次后停止。

然而在 this 页面上，FF/Chrome 将按预期一直工作到最后（并且 Safari 始终如此）。

这是控制点击的代码：

<script>$(window).load(function(){
var currentElement = $("#ngg-gallery-list > div:nth-child(2)");
var onScroll = function () {
    //get the current element
    var container = $("#ngg-galleryoverview");
    var wrapper = $("#ngg-gallery-list");
    var children = wrapper.children();
    var position = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            return;
        }
    }
}

var scrollToElement = function ($element) {
    var container = $("#ngg-galleryoverview");
    var wrapper = $("#ngg-gallery-list");
    var children = wrapper.children();
    var width = 0;
    console.log(children.length);
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);

        if (child.get(0) == $element.get(0)) {
            if (i == 0) {
                width = 300;
            }
            container.animate({
                scrollLeft: width
            }, 300);
            onScroll();
        }
        if (child.next().length > 0) {

            //make sure we factor in borders/padding/margin in height
            width += child.next().offset().left - child.offset().left
        } else {
            width += child.width();

        }
    }
}

var next = function(event) {
    event.preventDefault();
    scrollToElement(currentElement);
}

var prev = function(event) {
    event.preventDefault();
    var container = $("#ngg-galleryoverview");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
}

$("#ngg-galleryoverview").on('scroll', onScroll);
$("#nexty").click(next);
$("#prevy").click(prev);
});
</script>

我被难住了。

Answer 1

好吧，让我的代码看起来更像我发现的那样解决了这个问题。（即使我不完全确定为什么）。希望对其他人有所帮助，这是最终代码：

<script>
$(document).ready(function () {

var currentElement = $("#ngg-galleryoverview > div:nth-child(1)");

var onScroll = function () {
    var container = $("#ngg-galleryoverview");
    var children = $(".list");
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            //console.log(currentElement);
            return;
        }
    }
};

var scrollToElement = function ($element) {
    var container = $("#ngg-galleryoverview");
    var children = $(".list");
    var width = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        if (child.get(0) == $element.get(0)) {
            if (i === 0) {
                width = 0;
            }
            container.animate({
                scrollLeft: width
            }, 500);
            onScroll();
        }
        if (child.next().length > 0) {
            width += child.next().offset().left - child.offset().left;
        } else {
            width += child.width();
        }
    }
};

var buttonright = function (e) {
        scrollToElement(currentElement.next());
    };

var buttonleft = function (e) {
    var container = $("#ngg-galleryoverview");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
};

    onScroll();
$("#ngg-galleryoverview").scroll(onScroll);
$("#nexty").click(buttonright);
$("#prevy").click(buttonleft);

});</script>

jQuery animate scrollLeft 在 FF 和 Chrome（但不是 Safari）中点击几次后停止工作

jQuery animate scrollLeft stops working after several clicks in FF and Chrome (but not Safari)

javascript

jquery

scroll

google-chrome

jquery-animate