CODEWITHSUNDEEP
htmlcss
JavaBeginner
JavaBeginner

Reputation: 115

How do I hide scroll bar by default

I am using the following CSS to provide scroll bar when window is re-sized. I have two problems. One is the vertical scroll bar is visible by default. I want it to appear only if window is re-sized. I have tried with different heights but that didn't go. Second problem is when window is re-sized, the background color of the part of div which is viewed after scrolling is not applied. How do I fix these? This is my CSS and div

    <div class = "gridclass" id="grid1" jsid="grid1" dojoType="dojox.grid.EnhancedGrid"
            query="{ name: '*' }"data-dojo-props="plugins:{ pagination:{pageSizes: ['10', '25', '50', '100'],
            description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, position: 'bottom', maxPageStep: 7}}, rowsPerPage:10"></div>
    </div> 

    #grid1{
       overflow-x:auto;
       overflow-y:auto;
       height:60%; 
       width: 106.5%;
    }

Upvotes: 0

Views: 1765

Answers (2)

coolprarun
coolprarun

Reputation: 1163

Set overflow: hidden; on the body tag :

<style type="text/css">
body 
{
overflow:hidden;
}
</style>

To hide only the vertical scrollbar, use overflow-y:
To hide only the Horizontal scrollbar, use overflow-x: 

<style type="text/css">
body 
{
overflow-y:hidden; or overflow-x:hidden
}
</style>

Second Problem :
Try this one..

Fiddle

$(window).scroll(function(){
if($(window).scrollTop()<800){
$('#fixed').css('background-color','Yellow');
}else{
$('#fixed').css('background-color','White');
}
})

Upvotes: 2

user2678106
user2678106

Reputation:

css style:

body{
overflow:hidden;
}

and javascript:

$(window).resize(function() {
    $('body').css({'overflow':'auto'});
});

Upvotes: 0

Related Questions