ios中的嵌入式视频阻止导航栏功能jquery mobile

Posted 2023-03-15

【中文标题】ios中的嵌入式视频阻止导航栏功能jquery mobile

【英文标题】：Embedded video in ios preventing navbar functionality jquery mobile

【发布时间】：2013-09-26 12:18:06

【问题描述】：

希望快速修复。

我在我的data-role="content" 中嵌入了一个视频，该视频在我的固定导航栏页脚下方滚动。

这很好用，视频海报/框架也会在我的页脚下方滚动。

但是，当视频帧直接位于固定导航栏页脚下方（即堆叠的页面中间滚动）时，对导航栏的任何点击都会做出响应，就像视频帧实际上位于顶部一样。

因此，尽管从视觉的角度来看，所有内容都应按其应有的方式显示，但它在单击时却以完全相反的方式执行。

编辑：当使用 cordova 2.9.0 和 xcode 4.6 打包并在 xcode 中的模拟器中运行时，会发生这种情况。它不会发生在网络浏览器中。

我尝试使用 z-index 解决此问题，但似乎没有奏效。以下是相关代码：

<div data-role="content">




    <video poster="img/logo.png">

        <source src="videos/videosample.mp4" type="video/mp4" />

    </video>

</div>

<div class="container"><img src="img/Background_Dark.png" />

</div>

<div data-role="footer" data-tap-toggle="false" data-position="fixed" data-id="myfooter">
    <nav data-role="navbar">
    <ul>
        <li><a href="#page" data-transition="fade"><img src="img/Home_JQuery_Footer_Icon.png"  /></a></li>
        <li><a href="#page4" data-transition="fade"><img src="img/About_Us_JQuery_Footer_Icon.png"  /></a></li>
        <li><a href="#page3" data-transition="fade"><img src="img/Request_JQuery_Footer_Icon.png"  /></a></li>

        </ul>
        </nav>
</div>

谢谢。

【参考方案1】：

对于任何寻求解决类似问题的人，我发现 this 文章演示了如何在内容区域之外创建可滚动的 div。这解决了我遇到的重叠问题。