ListView in WinJS jumps back when height and width specified on listItem

Question

I'm trying to achieve something very simple with WinJS. I want the items in a listView to occupy the full height of the viewport.

I can achieve this by overriding the default styles for the listView like this:

.win-itemscontainer {
    width: 100% !important;
    height: calc(100vh - 1px) !important;
}
.win-horizontal .win-gridlayout .win-container {
    height: calc(20% - 1px);
    margin: 0 0 1px 1px;
    outline: none;
}
.win-listview {
    height: 100vh;
    margin: 0;
    padding: 0;
}
.win-listview .item {
    width: 250px;
}

This works fine and renders 5 rows of list items. The list then scrolls if the number of items exceeds the containers width.

However, there are some very odd behaviours occurring. If I scroll to the very end of the listView, something causes the scroll position to jump back making the last row in the listView unattainable because the jump prevents me from ever reaching it.

Is there a better way of achieving what I'm after or is there a way to fix what I've implemented?

Answer 1

I was never able to sufficiently answer this so I switched from a listView to a repeater which gave me greater control over the markup and CSS.