Vertically Scrolling in Window 8 store app

Question

I am developing a windows 8 store app using HTML5 and Javascript. And I want to scroll some div content vertically. I am using following inline css to do so

<div style="height:100%;overflow-y:scroll;">

//Content

</div>

But Its only showing scrolling bar and i am not able to scroll the content.

This is how i am getting my scrolling bar, as you can see last input box is showing half and i cant scroll it.

Answer 1

I think i found a quick solution for this problem. Instead of giving height as 100%. Just give height in pixels that will cover your current window till bottom.

For example:

If your screen height is 780px, and you have 80px height covered by header. So if you want to use scrolling in remaining 700px. Use following code :-

<div style="height:700px;overflow-y:scroll;">

//Content

</div>

Hope it ll work for you as well. But Stil looking for alternate solution , if there is any.

Answer 2

In general, this is not a Windows Universal App problem, but simply an HTML/javascript one. By default, browsers scroll the body content that exceeds the browser window, but in the UWP JS app, no scrolling is provided by default. So, to make the content scrollable, you do need to provide a height, but the height may be dynamic. Using javascript, you can set the height more appropriately based on the user's screen size.

Basically, in the main javascript file, you can set the height of the scrollable region.

body {
    overflow-y: scroll;
}

function setElementToRemainingWindowHeight(selector, usedHeight) {
    $(selector).height($(window).innerHeight() - usedHeight);
}

function calculateUsedHeight() {
    return $('.header').innerHeight() + $('footer').innerHeight();
}

$(function(){
    setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
    window.resize(function() {
        setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
    });
});

You can move the code to respond to whatever event in your app that would cause the scrollable area to change (maybe things are entering and exiting the surrounding layout, or whatever).

Depending on when the items in the list are added, and how that adding occurs, your requirements may change. See this post (which I wrote) about how to do this more dynamically...