Hy,
这就是我的测试页面的样子:
蓝色区域是父页面,绿色区域是运行 ExtJS 应用程序的 IFrame(内部带有标签的简单视口)。
如果网站在触摸设备(iPad、Android 平板电脑等)上执行,则无法通过在 IFrame(绿色区域)上“擦拭”来滚动页面。必须擦拭蓝色区域才能滚动页面。
这在 ExtJS v4.2.1 中可以正常工作(请参阅下面的链接)。
测试地点:
https://skaface.leo.uberspace.de/ScrollTest/Ext510/ https://skaface.leo.uberspace.de/ScrollTest/Ext510/(未按预期工作,使用 ExtJS v5.1.1)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/ https://skaface.leo.uberspace.de/ScrollTest/Ext421/(按预期工作,相同的代码,但使用 ExtJS v4.2.1)
测试代码:
父站点(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="margin: 50px; background-color: blue;">
<iframe src="frame.html" width="100%" height="1400" style="border: none;"></iframe>
</body>
</html>
IFrame(frame.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css" />
<script type="text/javascript" src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
style: { 'background-color': 'yellowgreen' },
layout: 'fit',
items: [{
xtype: 'label',
text: 'Ext version: ' + Ext.versions.extjs.version,
margin: 16
}]
});
});
</script>
</head>
<body>
</body>
</html>
我真的很感激这个问题的解决方法,因为它实际上使我的网站在移动设备上毫无用处,尽管它们在 ExtJS 4.2.1 上运行得很好。
谢谢并致以诚挚的问候
PS:我已经发布了错误报告在 sencha 论坛中 https://www.sencha.com/forum/showthread.php?302696-Mobile-device-scrolling-issue-when-in-IFrame,但由于我在知道之前没有得到任何帮助,所以我也在 stackoverflow 上碰碰运气......