How to prevent scrollbar from showing when launching a web app

I'm developing a web application for Firefox OS, i'm using HTML 5 and jQuery Mobile for this app,

I'm using different pages and give the user the ability to swipe between pages

<div data-role="page" id="p1"></div>

$.mobile.changePage('#p'+i, {
    transition: "slide"
});

some pages need scrolling, some don't. When I swipe from one page to another, the appearance of a scrollbar moves the page a few pixels to the side. and it's affecting the swipe as well. Is there any way to avoid this without explicitly showing the scrollbars on each page?

I tried to add scroll to all the pages but still have the same problem :

html {
    overflow-y: scroll;
}

It works when disable scroll completely, but I want always to have the scroll ability without showing the scroll bar, or showing it after page load.