javascript - 如何在快照 View 中向 Windows 8 应用程序添加垂直滚动

Question

我正在使用 Html、CSS 和 JavaScript 开发 Windows 8 应用程序。在快照 View 中，某些屏幕将无法看到全部内容，这就是我想要垂直滚动的原因。

我该如何解决？我想在 html 或 CSS 中使用它。

HTML:

<section aria-label="Main content" role="main">
        <div class="divContainer" style="width: auto; height: auto; overflow:auto; display: -ms-grid; 
            -ms-grid-columns: 450px 50px 450px 46px 250px; 
            -ms-grid-rows: auto">
            <div id="pageCalc">
                <h2>User information</h2>
                ... 
                Some text here
                ...
            </div>
            <div id="pageText">
                <h2>Contact information</h2>
                ...
                Some text here
                ...
                <img id="imageDiv" src="/images/aboutlogo.png" border="0" alt="">


            </div>
            <div id="pageAdd">
                ...
                An add here
                ...
            </div>
        </div>
    </section>

#pageText、#pageAdd 和#pageCalc 的宽度、高度和类似的东西是在 css 中定义的，然后在快照 View 中，它使用了这段代码:

CSS:

@media screen and (-ms-view-state: snapped) {
.about section[role=main] {
    margin-left: 20px;
    margin-right: 20px;
}

.divContainer {
    height:1080px;
    width: 230px;
    display:-ms-grid;
    -ms-grid-column: 230px;
    -ms-grid-row: auto 20px auto 20px auto;
    overflow: auto;

}

#pageCalc, #pageText, #pageAdd {
    width: 230px;
}

#pageCalc {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

#pageText {
    -ms-grid-column: 1;
    -ms-grid-row: 3;
}

#pageAdd {
    -ms-grid-column: 1;
    -ms-grid-row: 5;
}

Answer 1

html、css 和 JavaScript 中的 Win8 应用程序在 Microsoft WWA 主机进程上运行。那就是基于 Internet Explorer 的渲染平台。因此，您可以像在 IE 上一样制作您的应用程序。只需将捕捉到的内容包装到具有固定高度和 overflow: auto 的 div 中，您将获得垂直滚动。