CODEWITHSUNDEEP
javascripthtmlcssscrollwidth
whatscool
whatscool

Reputation: 317

How to force an HTML page to have a horizontal scrollbar

I'm making a game with HTML canvas and javascript. At the moment, javascript in my head generates the complicated canvas element. In the body is only a small p with instructions. The game is about 1100px x 600 px. If you go to the page with a smaller resolution screen, the remainder of the game is clipped off the edge. I want the page to have a browser-native horizontal and vertical scrollbar they can use to scroll the game.

I've looked at various combinations of containers and min-width but I was wondering if there's a standard practice for this?

Upvotes: 0

Views: 2540

Answers (2)

Tui Popenoe
Tui Popenoe

Reputation: 2114

The CSS overflow property, specifies whether to clip content, render scrollbars, or just display content when it overflows its block level container.

Try adding the ID #scrollable to the element you want to force a scrollbar on and then

#scrollable{
    overflow: scroll;
    width: 100%;
}

From the MDN Docs

If you want to force overflow scroll in a single axis, you can use:

overflow-x: scroll;

or

overflow-y: scroll;

MDN Docs on overflow-x

Upvotes: 1

morha13
morha13

Reputation: 1937

Use overflow-y and CSS

body {
   overflow-x: scroll; /*For regular vertical scroll */
   overflow-y: scroll; /*For Horizontal scroll */
}

Upvotes: 0

Related Questions