Question

I am developing a web app which runs on a (windows) tablet. I won’t go into too much detail, but basically the user has a list of tasks and checks each one off when it’s done.

When they check a task, I use jQuery (scrollTop()) to scroll so that they can click in the same place for the next task, instead of having to manually scroll (which is tricky on this particular tablet).

The problem is, that when they can to the last 5 or 6 tasks, it’s the end of the div, so the scrolling stops, which is weird because they have been used to clicking in the same place.

I would like to keep it scrolling, but I am not sure how to.

My guess is just to add whitespace at the bottom, but then I am not sure how to detect when it’s reached the bottom in order to add the whitespace.

Answer 1

On page load find the last list item. Then add whitespace so that it can scroll to the top of the page. I do this for one of my websites so that when people visit anchors, they appear at the top of the page. Hate it when they don’t myself!

var $lastinput = $('input').last();
if ($lastinput.length > 0) {
    var headerTop = $lastinput.offset().top;
    var spacing = $(window).height() - ($('body').height() - headerTop);
    $('#setpageheight').height(spacing);
}

At the bottom of the content area I have a zero height div called setpageheight. I give this a height as necessary.

http://jsfiddle.net/Ge7nM/