How do I hide scroll bar by default


Tags: html,css

Problem :

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%;
    }


Solution :

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');
}
})

    CSS Howto..

    How to conditionally add css properties in jquery (coffeescript)

    How to adapt a flex div's width to content

    How do I use CSS transformations to slide a div on screen?

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How to add css library to project generated with angular-cli@webpack

    how to implement list bullets in CSS [closed]

    How can I set the width of something in jquery based on variables?

    In html, how is a child element's percentage-based size calculated when its parent has padding?

    How to create a circle with text coming out of it like rays [closed]

    How to load multiple CSS files within a JS script

    How to use a CSS animation within a JavaScript plugin?

    How to draw two non-concentric circles in CSS with numbers inside it?

    How do I get rid of the white space at the top of my web page?

    CSS: how to make margin: 0px auto work

    How to vertically and horizontally centre text with a variating font size in CSS

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    How to mix two image using clipping in css?

    How to center nav using CSS/HTML? [closed]

    How to change select element's background color when it's selected?

    How to give css when span tag within double quotes

    Rails - how to get absolute url of an asset in css.erb

    How to adjust responsive behaviour of menu bar's elements

    How to edit WordPress CSS written as inline CSS? [duplicate]

    How to align more than one DIVs which list of letters to the center

    How to show div of google maps after hidding it

    How to programmatically change the css background image?

    How to change buttons to pictures in jquery dialog

    how to change css styles of custom jquery widget?

    How to select col id using jquery to hide via css

    How do I get my divs to ease in right after eachother on page load?