I am trying to accomplish something a bit strange. I am working on a mobile-responsive website where in most of the pages all of the content fits inside the viewport so there is no overflow or scrollbars in most scenarios. This looks perfect when viewed on a desktop screen but I really want the tactile feeling of touch scrolling when viewed in portrait on mobile devices, as the page being completely static feels odd on a mobile website. I was thinking of just adding some blank space below the viewport by setting the 'bottom' attribute of my footer to a minus offset value like so:
#footer {
bottom: -20px;
position: absolute;
width: 100%;
height: 40px;
}
This sort of accomplishes what I am looking for and enables scrolling with the extra dead space but after scrolling up and down a couple of times, a blank white space that I assume is the height of the footer appears that is not covered by the pages background styles (which is applied to the page's body tag).
Is there any way of accomplishing what I am looking to achieve cleanly without modifying the rest of the page's content?
Thanks