0

我添加<meta name="buildfire" content="disableTheme">到我的 Buildfire 插件的 HTML 中。它确实禁用了主题 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>
4

1 回答 1

1

如果您通过元标记禁用主题，它将排除通常会注入您的插件的 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;
}

于 2018-12-03T21:12:18.520 回答