How to remove the scrollbar in jqueymobile web application? - jquery-ui

Question

I am developing one mobile web application using jQueryMobile alpha3. In that am getting scrollbar in every page even-though the controls are within the screen.
I want scrollbar only when the controls went out of the screen else i have to remove the scrollbar. How do i set this?is there any way to specify?

Answer 1

I had this happening to me too for a time, the problem was with the overflow on certain elements. You can fix it by applying a CSS rule to any element with scroll bars. So, something like this...
.ui-content{
overflow:hidden;
}

Answer 2

try This .
CSS
body, html, div
{
width:100%;
height:3000px;
overflow:hidden;
}
jquery
$("div").bind("mousewheel",function(ev, delta) {
var scrollTop = $(this).scrollTop();
$(this).scrollTop(scrollTop-Math.round(delta * 20));
});
Library
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);