1

我在使 jQuery 水平 ui 滚动条在 Chrome 中工作时遇到问题。它在 FireFox 甚至 IE 中都可以正常工作，但在 Chrome 中我根本无法让它计算出我的“内容”区域的正确宽度。“容器”有一个 920px 的固定宽度，所以没问题，但我的“内容”是“在这个页面上”，正好是 4983px 宽，但是当使用 outerWidth() 甚至 outerWidth(true) 计算时，它会返回一个胡说八道的价值比它应该的要小得多！ 这是我正在处理的页面的链接。

这是我到目前为止的代码。这是一团糟，因为我仍在工作并做一些测试......

    var container = $('.gallery');
var content = $('.content', container);

var itemsWidth = content.outerWidth(true) - container.width();

var width = 0;
$('figure').each(function() {
    width += $(this).width();
});

console.log('I dont know if I chose width: ' + width);
console.log('Or if I chose itemsWidth: ' + itemsWidth);
console.log('Actually, none of them is working on Chrome/webkit browsers');


$('.slider', container).slider({
    min: 0,
    max: itemsWidth - 20,

    stop: function(event, ui){
        content.animate({ 'margin-left' : ui.value * -1}, 500);
    },

    slide: function(event, ui){
        console.log(ui.value);
        content.css('margin-left',ui.value * -1);

    }
});

请注意，我试图以两种不同的方式计算宽度值：itemsWidth (var) 和 width (var)。它们都不起作用。奇怪的是......如果你不断刷新浏览器（Chrome），它最终会抓住“内容”的正确宽度，但这就像每 10-15 次尝试一次 =\

这似乎是一个 Chrome/Webkit 错误，但我不知道如何解决这个问题！感谢您的时间和帮助！

4

0 回答 0