javascript - 当导入为 HTML 模板时,Frame Web VR 可防止从 Bootstrap 滚动

标签 javascript html twitter-bootstrap aurelia aframe

在 Aurelia 框架应用程序中导入 aframe a-scene 作为模板时,我目前遇到了一个问题。

我试图在相关的 stackoverflow 问题上找到帮助,但没有一个将点连接在一起:因为 AFrame 基于 Three.js,这是我能找到的最相似的问题,但尚未得到解答 ( https://github.com/mrdoob/three.js/issues/3091 ) .

我在我的home.html文件中集成了AFrame场景如下:

<template>
    <a-scene>
        <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>

        <a-sky color="#000000"></a-sky>
        <a-entity position="0 0 3.8">
            <a-camera></a-camera>
        </a-entity>
    </a-scene>
</template>

从我的 home.js 导入 aframe 否则场景不会被渲染: 导入 'aframe';

现在看来这个导入覆盖了一些 Bootstrap 滚动功能,但我不明白为什么。

注意:谷歌 Material 设计精简版和 aurelia Material 插件 (https://github.com/genadis/aurelia-mdl) 也发生了一些意外行为,在这种情况下,AFrame 场景被缩放但页面滚动仍然有效。

这里是完整代码的github项目:https://github.com/dnhyde/aframe-aurelia.git

最佳答案

使用embedded组件移除A-Frame全屏和position: fixed样式。 https://aframe.io/docs/master/components/embedded.html

<style>a-scene { width: 600px; height: 300px; }></style>

<body>
  <!-- ... -->
    <a-scene embedded></a-scene>
  <!-- ... -->
</body>

关于javascript - 当导入为 HTML 模板时,Frame Web VR 可防止从 Bootstrap 滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42855228/

相关文章:

javascript - 按钮一一着色

css - Bootstrap 下拉菜单出现在其他元素后面 - IE7

javascript - Window.top 在 WorkerGlobalScope 中未定义

javascript - Web 应用程序和 native Android 应用程序之间的通信

php - 由自定义弹出窗口指定的输入的表单框架

javascript - jQuery 向下滑动到全高? jQuery 如何知道元素的全高?

javascript - 在数组中查找一个项目并添加一个值

javascript - 幻灯片不工作?

java - 我们可以动态更改 GWT Bootstrap 3 ButtonCell 图标吗?

html - Twitter Bootstrap 3 pull-right 卡在小窗口上