iScroll は、div の幅全体を水平方向にスクロールしていません。間違った幅の値で止まりますが、その値がどこから来たのかわかりません。メイン スクロール div の幅は変更されていないため、呼び出す必要はありませんrefresh()
。
基本的に、サイズを変更するスクロール div 内に div があるため、内部の div を絶対位置に変更できますが、内部の他の div は最初は右にフロートされます。私は iScroll を使用したくありませんでしたが、Trigger.io を使用して HTML5 iOS WebView アプリを構築しているので必要です。
http://jsfiddle.net/simpleshadow/wQQEM/15/
var myScrollers = [];
$(function() {
var scrolls = $('.scrolls');
$.each(scrolls, function(i, value) {
var self = this,
imageDiv = $(this).find('.imageDiv'),
imageWrapper = $(this).find('.imageWrapper'),
images = $(this).find('.imageDiv img'),
width = 0;
$.each(images, function(index, value){
width += $(this).width();
});
imageDiv.css('right', (-$(this).width()+images.first().width()) + 'px');
imageWrapper.width(images.first().width());
myScrollers[i] = new iScroll($(this)[0], {
hScroll: true,
vScroll: false,
hScrollbar: false,
vScrollbar: false,
onScrollMove: function(e){
var x = 0;
-myScrollers[i].x >= 0 ? x = -myScrollers[i].x : x = 0;
updateWindow($(self), x);
},
onScrolling: function(e) {
var x = 0;
-myScrollers[i].x >= 0 ? x = -myScrollers[i].x : x = 0;
updateWindow($(self), x);
}
});
});
// Update the window
function updateWindow(el, x) {
var x = x,
width = 0,
imageDiv = el.find('.imageDiv'),
imageWrapper = el.find('.imageWrapper'),
images = el.find('.imageDiv img');
el.find('.imageDiv, .imageDiv img').css({
height: (x/160)*75+75 >= 150 ? 150 : (x/160)*75+75
});
for (var i = 0, l = images.length; i < l; i++) {
width += $(images[i]).width();
if (imageWrapper.width() >= width && i !== 0) {
$(images[i]).addClass('out').css({
left: (width-$(images[i]).outerWidth(true)) + 'px'
});
} else {
i !== 0 && $(images[i]).removeClass('out').css({
left: 0
});
}
}
if (x+images.first().width() <= width) imageWrapper.width(x+images.first().width());
imageDiv.css('right', (-$(this).width()+images.first().width()) + 'px');
}
});