iScroll не прокручивает горизонтально всю ширину div

iScroll не прокручивает по горизонтали всю ширину деления. Это останавливается на неправильном значении ширины, которое я не могу найти, откуда это значение происходит. Ширина основного прокрутки div не меняется, поэтому мне не нужно звонить refresh(),

По сути, у меня есть div внутри scroll div, который меняет размер, так что div внутри может быть изменен на абсолютную позицию, в то время как другие div внутри изначально плавают вправо. Я не хотел использовать iScroll, но это необходимо, так как я создаю приложение HTML5 iOS WebView с Trigger.io.

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');

    }

});

0 ответов

Другие вопросы по тегам