IFrame 内 ExtJS 5 应用程序的滚动问题

2024-01-11

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 上碰碰运气......


这个行为很奇怪,我在使用niceScroll插件之前见过它,并且许多其他插件也有同样的问题iframe,无论如何检查这个解决方法 http://prollygeek.com/so/

我用过Hammer.js http://hammerjs.github.io/用于检测触摸手势的 jQuery 插件iframe,如果您发现任何有关敏感性的问题(因为我不知道您正在寻找什么约束),您可以调整在其存储库中找到的hammer.js选项(例如平移阈值、指针等)

代码非常简单:

<body id="mainbody"  style="margin: 50px; background-color: blue;">
    <iframe id="myframe"  src="frame.html" width="100%" height="1400" style="border: none;"></iframe>
</body>
<script>
var myBody
$('iframe').load(function(){
  myBody=$(this).contents().find("body");
  myBody.css({"height":"100%","overflow":"hidden"}).hammer({threshold:1}).bind("pan", myPanHandler);
});
function myPanHandler(ev)
{
    $("#mainbody").scrollTop($("#mainbody").scrollTop()-ev.gesture.deltaY)
console.log(($("#mainbody").scrollTop()-ev.gesture.deltaY*0.5)+".."+$("#mainbody").scrollTop())
}
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

IFrame 内 ExtJS 5 应用程序的滚动问题 的相关文章

随机推荐

  • if constexpr 未在模板化 lambda 中丢弃的错误分支

    我在模板 lambda 中遇到 if constexpr 问题 为了便于讨论 让我们忽略我是如何到达那里的 但我有一个 struct foo 它以某种方式定义 结果如下 template
  • Django:将数据从一个数据库复制到另一个数据库

    我有两个 sqlite db 文件 我想将数据库文件表中一列的内容复制到另一列 例如 我在名为 new db 的数据库文件中有模型信息 class Information models Model info id models AutoFi
  • 显示 Volley 文件下载的进度值

    我需要以百分比显示文件下载进度 目前我正在使用Volley图书馆 我用InputStreamVolleyRequest发出下载请求的类BufferedOutputStream读 写文件 如何以最有效的方式显示进度更新 我正在将进度条与 Ht
  • 为什么此代码不能正确增加计数器?

    在下面的代码中 为什么它不每次将整数加一 例如 假设我有1 OF 5当我提交表格时 提交后应该是2 OF 5 但相反 它显示5 OF 5 即使我将最大值从 5 更改为 3 也会发生这种情况 它开始于1 OF 3并立即跳转到3 OF 3 这是
  • 使用UTF-8编码的VBA Excel宏写入文件[重复]

    这个问题在这里已经有答案了 我正在 Excel 中创建一个宏 用于处理电子表格并将内容 文本 写入文件 我需要将此文件编码为 UTF 8 我尝试使用 OpenTextFile TristateTrue 和 StrConv vbUnicode
  • 如何避免Angularjs中的大量依赖

    我有一个 Angular 应用程序 它运行良好 但随着我的应用程序变得越来越大 我担心必须在每个控制器中注入大量依赖项 例如 app controller viewapps scope Appfactory Menu timeout fil
  • 单独窗口中的 Android Studio 模拟器

    我的 Android Studio 遇到问题 这是我第一次安装Android Studio 问题是 当我安装任何设备时 它会在设备或模拟器周围出现灰色背景 我不知道它是否与最新的 Android Studio 版本有关 因为我已经更新了它
  • C++ 中的头文件和 Java 中的抽象类/接口实现都是相同的想法,这是否正确?

    我对 C 有点熟悉 我知道对于几乎每个头文件 我都必须创建源文件来配合它 现在我正在研究java接口和实现 它看起来是一样的 首先 您只需在一个类中命名变量和方法 然后在其他类中定义它们 C 和Java中的这些东西是不是基本相同或者相似 J
  • 本地站点的 HTML 图像

    我是 HTML 新手 有一个关于图像的简单问题 下面是我正在使用的一个简单的 html 文件 我想将图像放入其中 该图像存储在我网站的主目录中 该网站是本地的 在我的 MacBook 上 h1 My First Heading h1 p M
  • 使用字符串日期对列表进行排序 [Kotlin]

    我有数组列表typeBeanArrayList其中元素有点像日期 例如 30 03 2012 28 03 2013 31 03 2012 2 04 2012 我怎样才能排序降序 Code typeBeanArrayList database
  • 如何通过保持“templateurl”不变来编译 Angular 2 Webpack

    Webpack 通过在中生成 js 来编译 typescript 文件dist文件夹 我发现 webpack 正在将所有 templateurl 更改为 template 如下所示 我的打字稿组件 Component selector ap
  • CListCtrl:如何保持水平滚动位置?

    如何保持 CListCtrl 的水平滚动条位置 我定期转储并重新填充列表控件的内容 因此无需明确记住旧位置并恢复它 滚动就会返回到左上角 我问了一个相关问题 CListCtrl 如何保持滚动位置 https stackoverflow co
  • 雪豹上的 python 需要 32 位 libxml2 吗?

    我在我的 sl mbp 上安装 scrapy 真是太麻烦了 它需要 libxml2 所以我开始安装它 从 macports 安装它似乎并没有拉下 python 绑定 通过 scrapy 的说明从源代码安装它 here http doc sc
  • 在Eclipse中导入ant build.xml

    我有一个使用ant构建的android项目 是否可以在eclipse IDE中导入这个ant项目 更新 有一个选项可以使用 ant 创建项目build xml在 Eclipse 中 现有 ant Buildfile 中的文件 gt 新建 g
  • 按降序对两列最常见的组合进行排序

    我的数据框看起来像这样 A B C 1 3 1 2 1 1 2 3 1 1 2 1 3 1 1 1 2 1 2 1 1 1 3 1 1 2 1 我想将数据减少为仅按降序排序的两列 A 和 B 最常见的组合 输出应该看起来像 A B coun
  • 淘汰赛手风琴绑定断裂

    以下绑定在 1 9 之前有效 ko bindingHandlers accordion init function element valueAccessor var options valueAccessor setTimeout fun
  • 如何将版本信息添加到我的 powershell 脚本中?

    我有一个脚本 test ps1 如下所示 但我希望能够运行 test ps1 version并让它返回当前的version剧本给我 有没有办法做到这一点 lt SYNOPSIS Test DESCRIPTION Desc INPUTS No
  • 使用外部框架将 Vue3 自定义元素集成到 Vue2 应用程序中

    我有一个用 Vue2 编写的应用程序 它还没有真正准备好升级到 Vue3 但是 我想开始在 Vue3 中编写一个组件库 并将组件导入回 Vue2 以便在准备就绪后最终进行升级 Vue 3 2 引入defineCustomElement它工作
  • 更改选择标签中单独选项的 css font-family

    我不知道这是否可能 如果不可能 是否有人可以提出可选的想法 但我试图在选择标签中显示不同字体的下拉菜单 特别是来自 Google 字体目录的字体 在下拉列表中 我尝试通过使用其代表的字体设置每个选项的样式来显示预览
  • IFrame 内 ExtJS 5 应用程序的滚动问题

    Hy 这就是我的测试页面的样子 蓝色区域是父页面 绿色区域是运行 ExtJS 应用程序的 IFrame 内部带有标签的简单视口 如果网站在触摸设备 iPad Android 平板电脑等 上执行 则无法通过在 IFrame 绿色区域 上 擦拭