Question

我在Buildfire插件的HTML中添加了<meta name="buildfire" content="disableTheme">。它确实禁用了主题CSS，但现在也阻止了页面的正常滚动。这是一个简单的HTML / CSS / JS插件，没有外部框架。这是用于小部件的。使用BuildFireSDK版本1.15.3

在插件测试器中的本地环境下，滚动可以正常工作。但是，当将插件加载到用户的控制面板中或将测试应用程序加载到设备上时，它无法正常工作。

是否可以禁用主题样式，但允许正常滚动？

编辑：我从HTML中删除了所有其他类，样式和脚本标签。它仍然不会滚动。

<html>
<head>
    <meta name="buildfire" content="disableTheme">
    <title>Test</title>
    <script src="../../../scripts/buildfire.js"></script>
</head>
<body style="overflow-y:scroll;">
    <div style="overflow-y:scroll;">
        <div class="container" style="overflow-y:scroll;">
            <div>
                <div>
                    <h1>Test</h1>
                </div>
            </div>
            <div>
                <div>
                    <form>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                    </form>
                </div>

                <div>
                    <form>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>

                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

如果通过meta标记禁用了主题，它将排除通常会插入到插件中的CSS。根据您的插件，您可能需要添加其他CSS以适应您的需求。

以您的示例为例，您可以添加一些基准CSS：

html[buildfire] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  background: none;
  overflow: hidden !important;
}

html[buildfire] body {
  height: 100% !important;
  width: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 0 auto;
}

Buildfire插件：disableTheme元阻止滚动

1 个答案: