ListView 没有滚动条答案

【问题标题】：ListView doesn't have scrollbarListView 没有滚动条
【发布时间】：2015-12-08 04:00:53
【问题描述】：

滚动条有问题

在正文中我有这样的 div：

<div id="PageBody"></div>

在那里我用 javascript 加载我的列表视图

WinJS.UI.Pages.render("./pagebody.html",document.getElementById("PageBody"), null, true);

PageBody.html 看起来像这样

<!-- Simple template-->
<div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="smallListIconTextItem-Detail">
            <h4 class="win-h4" data-win-bind="textContent: title"></h4>
            <h6 class="win-h6" data-win-bind="textContent: text"></h6>
        </div>
    </div>
</div>

<!-- listview-->
<div id="listView"
     class="win-selectionstylefilled"
     data-win-control="WinJS.UI.ListView"
     data-win-options="{
            itemDataSource: Sample.ListView.data.dataSource,
            itemTemplate: select('.smallListIconTextTemplate'),
            selectionMode: 'none',
            tapBehavior: 'none',
            layout: { type: WinJS.UI.ListLayout }
    }">
</div>

现在，如果我的列表视图包含更多的项目（所有项目不能一次显示），那么滚动条不会出现，我也无法访问隐藏的元素。

如果我正常制作列表视图（不将其加载到 div 中）滚动正常工作。但是，我需要将不同的列表视图或其他控件加载到该 div 中（取决于用户想要什么数据）

我该如何解决这个问题？

更新：我在“PageBody”div 中添加了这个：style="overflow:scroll" 滚动条显示，但不工作（你不能滚动）

UPDATE2：网格布局滚动有效，但列表布局仍然无效

【问题讨论】：

添加overflow-y:scroll到你的列表视图

标签： javascript html css winjs uwp

【解决方案1】：

将此 CSS 放入填充数据的 div 中：

  overflow-y:auto;

JSFiddle 给它。

【讨论】：

没有帮助（尝试将其放入 id 为 pagebody 的 div 中，后来使用 id listView 并没有用。我提到的两个 div 都在原始帖子中）
请你把整个代码发给我..我无法弄清楚
我必须打开哪个文件
我已经给你发送了整个解决方案，我只编辑了 default.css、default.js 和 default.html 并添加了 pagebody.html

【解决方案2】：

问题是

height: 100%

在 .css 文件中

我删除了它，但唯一的问题是如何使列表视图适合页面。我在javascript中处理它。

window.addEventListener("resize", function () {
            var listviewdiv = document.getElementById("listView");
            var h = window.innerHeight;

            listviewdiv.setAttribute("style", "height:" + h.toString() + "px");
        });

剩下的唯一问题是如何在最初创建和加载应用程序时执行此操作（上面的代码仅在用户调整窗口大小后才有效）

对于这种情况，我已经输入了以下代码：

WinJS.UI.Pages.render("./PageBody.html", PageBody).done(function () {
            var listviewdiv = document.getElementById("listView");
            var h = window.innerHeight;

            listviewdiv.setAttribute("style", "height:" + h.toString() + "px");
        });

【讨论】：