Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/456.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript iScroll不水平滚动div的整个宽度_Javascript_Jquery_Mobile_Trigger.io_Iscroll - Fatal编程技术网

Javascript iScroll不水平滚动div的整个宽度

Javascript iScroll不水平滚动div的整个宽度,javascript,jquery,mobile,trigger.io,iscroll,Javascript,Jquery,Mobile,Trigger.io,Iscroll,iScroll不是水平滚动div的整个宽度。它在错误的宽度值处停止,我似乎找不到该值的来源。主滚动条div宽度没有改变,因此我不需要调用refresh() 基本上,我在滚动div中有一个div,它正在改变大小,所以里面的div可以改变为绝对位置,而里面的其他div最初是向右浮动的。我不想使用iScroll,但这是必要的,因为我正在使用Trigger.io构建一个HTML5 iOS WebView应用程序 var myScrollers=[]; $(函数(){ var scrolls=$('.s

iScroll不是水平滚动div的整个宽度。它在错误的宽度值处停止,我似乎找不到该值的来源。主滚动条div宽度没有改变,因此我不需要调用
refresh()

基本上,我在滚动div中有一个div,它正在改变大小,所以里面的div可以改变为绝对位置,而里面的其他div最初是向右浮动的。我不想使用iScroll,但这是必要的,因为我正在使用Trigger.io构建一个HTML5 iOS WebView应用程序

var myScrollers=[];
$(函数(){
var scrolls=$('.scrolls');
$.each(滚动、函数(i、值){
var self=这个,
imageDiv=$(this.find('.imageDiv'),
imageWrapper=$(this.find('.imageWrapper'),
images=$(this.find('.imageDiv img'),
宽度=0;
$.each(图像、函数(索引、值){
宽度+=$(此).width();
});
css('right',($(this.width()+images.first().width())+px');
宽度(images.first().width());
myScrollers[i]=新的iScroll($(this)[0],{
是的,
维斯克罗尔:错,
hScrollbar:错,
vScrollbar:false,
onScrollMove:函数(e){
var x=0;
-myScrollers[i].x>=0?x=-myScrollers[i].x:x=0;
更新域($(self),x);
},
onScrolling:函数(e){
var x=0;
-myScrollers[i].x>=0?x=-myScrollers[i].x:x=0;
更新域($(self),x);
}
});
});
//更新窗口
函数更新窗口(el,x){
var x=x,
宽度=0,
imageDiv=el.find('.imageDiv'),
imageWrapper=el.find('.imageWrapper'),
images=el.find('.imageDiv img');
el.find('.imageDiv,.imageDiv img').css({
高度:(x/160)*75+75>=150?150:(x/160)*75+75
});
对于(变量i=0,l=images.length;i=width&&i!==0){
$(images[i]).addClass('out').css({
左:(宽度-$(图像[i])。外径(真))+'px'
});
}否则{
i!==0&&$(图像[i]).removeClass('out').css({
左:0
});
}
}

如果(x+images.first().width())我设法发现,如果我将
.imageDiv
设置为
宽度:1368px;
,它看起来很完美。这可以正常工作,但最终内容会有所不同,因此我需要找出这个值的来源。修复方法如下:我根据错误的元素确定滚动div`.imageDiv'的宽度,并对其进行了修复。下面是一个示例n工作中的it示例:
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');

    }

});