jQuery の水平 UI スクロールバーを Chrome で動作させるのに問題があります。FireFox や IE でも問題なく動作しますが、Chrome では「コンテンツ」領域の正しい幅を計算させることができません。「コンテナ」の固定幅は 920 ピクセルなので問題ありませんが、私の「コンテンツ」は「このページ上」で正確に 4983 ピクセルの幅ですが、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) という 2 つの異なる方法で幅の値を計算しようとしていることに注意してください。それらのどれも機能しません。奇妙なことは...ブラウザ(Chrome)を更新し続けると、最終的に「コンテンツ」の正しい幅を取得しますが、10〜15回の試行ごとに1回のようです=\
Chrome/Webkit のバグのようですが、解決方法がわかりません! お時間をいただきありがとうございます。