iScroll将不会水平滚动，直到放大

问题描述：

我在使用Phonegap/Cordova构建的JQTouch iPhone应用程序中使用iScroll 4（cubiq.org/iscroll-4）。iScroll将不会水平滚动，直到放大

我的问题是，水平滚动，虽然'hScroll：true'，直到我放大和缩小我的图像，这使得一切工作正常（确认iScroll的作品和CSS的包装/滚动是正确的）。

HTML：

<div id="wrapper"> 
    <div id="scroller"></div> // Also tried with img-tag in div instead of as bg 
</div>

CSS：

#wrapper { 
position:absolute; 
top:45px; bottom:0; left:0; // 45px is header 
z-index:1; 
width:100%; // Also tried with window size (320) 
overflow:auto; // Also tried with scroll 
} 

#scroller { 
position:absolute; z-index:1; 
width: 1024px; // The size of my image 
height: 414px; // The height of my image 
background: url(img/test.png) no-repeat; 
padding: 0; 
}

JAVASCRIPT：

var myScroll; 
function loaded() { 
    myScroll = new iScroll('wrapper', { 
          hScrollbar: true, 
          vScrollbar: true, 
          hScroll: true, 
          vScroll: true, 
          zoom: true 
          }); 
}

更改 'VSCROLL' 和 '缩放' 的参数具有预期的效果的时候了。与水平滚动相关的参数在缩放启动后才会执行任何操作。

我尝试刷新包装或滚动到加载后的坐标，编辑我的应用程序的加载顺序，但没有任何帮助。

感谢您的时间，安德烈亚斯。

你有没有解决这个问题？我会着迷于知道答案，因为我有类似的问题。 – RecursivelyIronic 2012-12-14 03:26:37

答

您需要手动启用hScroll选项。

在每一个我的div需要被放大的，我有下面的代码：

data-iscroll='{"zoom":true, "hScroll":true }'

感谢您的回复。我在iScroll文档或演示中没有看到任何关于此的信息。我不确定它是否适合我，因为我决定从头开始重建我的应用程序 - 但希望它可以在这种情况下帮助其他人。再次感谢！ – Andreas 2012-08-09 10:02:30

我回去试了这个解决方案，但没有帮助。还编辑我的问题来进一步解释我的问题。 – Andreas 2012-09-01 12:54:43

答

这可能是因为包装的div宽度每一次比滚轮格宽度小的。

我在你的评论之后编辑了这个问题，但是关于CSS，我已经尝试了几乎所有我能想到的解决方案 - 所有解决方案都有相同的结果。不过谢谢。 – Andreas 2012-09-01 12:55:51

答

我有一个类似的问题，除了图像元素不会一直滚动，直到缩放或窗口调整大小。这个问题原来与DOM更新有关。我在当时隐藏的元素上创建了滚动条。当它稍后变得可见时，滚动不起作用。原来，我不得不显示，然后刷新滚动。

你可以在这里找到更多的信息：http://iscrolljs.com/#refresh

示例代码：

ajax('page.php', onCompletion); 

function onCompletion() { 
    // Update here your DOM 

    setTimeout(function() { 
     myScroll.refresh(); 
    }, 0); 
};

iScroll将不会水平滚动，直到放大

相关推荐