我在使用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'的参数会立即产生所需的效果。与水平滚动相关的参数在变焦触发后才会执行任何操作。
我尝试刷新包装器或在加载后滚动到坐标,编辑我的应用程序的加载顺序,但没有任何帮助。
谢谢你的时间, 安德烈亚斯。
答案 0 :(得分:0)
您需要手动启用hScroll选项。
在我需要缩放的每个div中,我都包含以下代码:
data-iscroll='{"zoom":true, "hScroll":true }'
答案 1 :(得分:0)
这可能是因为包装器div宽度每次都小于滚动器div宽度。
答案 2 :(得分:0)
我有一个类似的问题,除了在缩放或窗口调整大小之前图像元素根本不会滚动。该问题与DOM更新有关。我正在为当时隐藏的元素创建滚动条。当它后来变得可见时,滚动不起作用。结果我必须显示然后刷新滚动条。
您可以在此处找到更多信息:http://iscrolljs.com/#refresh
示例代码:
ajax('page.php', onCompletion);
function onCompletion () {
// Update here your DOM
setTimeout(function () {
myScroll.refresh();
}, 0);
};