Question

我有一个内容幻灯片：

滑动容器
| - ＆GT;包装纸 | ------＆GT; slide1，slide2等

的工作方式与计算包装器的位置X和幻灯片的位置X一样简单，以确定下一个/上一个幻灯片的包装器在哪里滑动以显示在容器的视口中。这很直接。

对于Firefox和Chrome，我使用CSS3转换和transition-duration为幻灯片设置动画。一切都很完美。几乎。

只有当我非常快速地点击下一个按钮时才会出现问题。我正在使用jQuery的

$(selector).position().left

读取幻灯片的位置X（左）和位置变为 0 （而不是预期的，比如300px）。我确实有一个标志isAnimating，以防止用户过快但这也无济于事。它确实可以防止滚动内容过快但位置可能仍然 0 ，好像其他东西导致它无法确定。

我做了一个简短的搜索，发现如果是图像被加载，一些浏览器将无法确定其位置，直到加载结束。但是，每个幻灯片都有一个图像，但在其中。幻灯片的CSS似乎设置了所有宽度和边距。

问题是为什么根据我描述的场景可能会发生这种情况，以及可能改进以确定Firefox，Chrome浏览器的所有时间X的位置？

Answer 1

我已经决定，如果 offsetLeft 在任何时候对我来说都不可靠，我可以使用元素的宽度及其在容器中的索引位置来计算出位置X

var newWrapperPos = undefined;
$(lotWrapper).children('div').each(function(index){
        if($(this).attr("id") === "slot"+id){
            var width = $(this).width();
            newWrapperPos = index * width;
            return false;
        }
    }); 
//now I can shift wrapper to position = newWrapperPos

抱歉，我无法共享代码 - 删除所涉及的所有功能都需要花费一些时间。但如果有人有更好的答案，请告诉我。现在这对我来说很好。

jQuery的$（选择器）.position（）。left有时在Firefox，Chrome浏览器中失败

1 个答案: