ListView没有滚动条

Question

I have problem with scrollbar

Inside body I have div like this:

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

There I load my listview with javascript

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

PageBody.html looks like this

<!-- 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>

Now, if my listview contains bigger number of items (all items cannot be displayed at once), then the scrollbar doesn't appear, and I can't access hidden elements.

If I make the listview normally (without loading it into div) scrolling works normally. However, I need to load different listviews or other controls into that div (depending on what data user wants)

How can I get around this problem?

UPDATE: I added to "PageBody" div this: style="overflow: scroll" scrollbar shows, but doesn't work (u can't scroll)

UPDATE2: With grid layout scrolling works, but still with list layout doesn't

Answer 1

Put this CSS into your div in which data is populating:

  overflow-y:auto;

JSFiddle for it.

Answer 2

The problem was

height: 100%

in .css file

I removed it, but then the only problem was how to fit listview to the page. I dealt with it within javascript.

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

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

And then the only problem remains is how to do it initially, when application is created and loaded (code above works only after user resizes window)

For that case I've put this code:

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");
        });