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

Posted 2023-05-08

【中文标题】在 FF 和 Chrome（但不是 Safari）中单击几次后，jQuery animate scrollLeft 停止工作

【英文标题】：jQuery animate scrollLeft stops working after several clicks in FF and Chrome (but not Safari)

【发布时间】：2016-10-04 18:24:33

【问题描述】：

滚动一组图像的一些 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>

我被难住了。

【参考方案1】：

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

<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>