CODEWITHSUNDEEP
javascripthtmlcss
Nickel
Nickel

Reputation: 533

CSS for forcing the browser to display scrollbar

I've written a web application and found that when I resize the page, the browser doesn't display it's own scrollbar as the window shrinks. This prevents the user from accessing content. I've set my body width to 500px and set the navbar to white-space:nowrap. How can I get the browser to recognize that there is content to the right of the screen?

Just to clarify I want the browser's scrollbar and not a scroll bar on any control.

Upvotes: 11

Views: 23265

Answers (3)

Ardeshir P.
Ardeshir P.

Reputation: 362

You can use one of the following depending on whether you want horizontal, vertical, or both scrollbars to be added:

body    {overflow-x:scroll;}
body    {overflow-y:scroll;}
body    {overflow:scroll;}

However, I think if you show the content in a section and then do

#id-of_your_div {overflow:scroll;}

So that you add scroll to the div rather than force the browser to show scrollbars, then your page will provide a much better user experience since such scrollbars are easier for users to access.

Upvotes: 19

Sparky
Sparky

Reputation: 98718

Instead of playing with the width, use the code that was intended for this purpose. The following CSS will force a scroll-bar to be present whether it's needed or not.

for both scroll-bars...

body {
    overflow: scroll;
}

or just for a horizontal scroll-bar...

body {
    overflow-x: scroll;
}

Upvotes: 3

span
span

Reputation: 5624

You can set the height or width of the body/element to 100.1% depending on which direction and element you want to have scrollable.

Upvotes: 4

Related Questions