0

我在使用 Phonegap/Cordova 构建的 JQTouch iPhone 应用程序中使用 iScroll 4 (cubiq.org/iscroll-4)。

我的问题是水平滚动，虽然'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'和'zoom'的参数马上就有了想要的效果。与水平滚动相关的参数在缩放触发它之前什么都不做。

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

谢谢你的时间，安德烈亚斯。

4

3 回答 3

0

您需要手动启用 hScroll 选项。

在我需要缩放的每个 div 中，我都包含以下代码：

data-iscroll='{"zoom":true, "hScroll":true }'
于 2012-08-07T18:55:16.930 回答
0

这可能是因为包装器 div 的宽度每次都小于滚动器 div 的宽度。

于 2012-08-31T09:18:34.823 回答
0

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

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

示例代码：

ajax('page.php', onCompletion);

function onCompletion () {
    // Update here your DOM

    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};
于 2014-01-30T04:15:52.167 回答