CODEWITHSUNDEEP
htmlcssfirefoxwebkit
Kei Izumi
Kei Izumi

Reputation: 177

Showing a scrollbar only in Firefox

I'd like to have a scrollbar at the bottom of the div but this CSS works only in Firefox, not Webkit browsers like Safari or Chrome.

div.hoge {
    width: 500px;
    overflow: auto;
}

I googled and found some pages mentioning you should use overflow-x or -webkit-overflow-scrolling but they didn't work either. Need to use some JSs? Any guesses?

Upvotes: 0

Views: 1264

Answers (4)

mahesmohan
mahesmohan

Reputation: 804

Have you tried overflow-x:scroll; ?

Also make sure that the div.hoge has the enough height to display the scroll bar at the bottom.

Upvotes: 0

DwB
DwB

Reputation: 38328

Here is an example fiddle of a div that scrolls on x. If you don't include the white-space: nowrap, then the text just wraps within the div and only the vertical (y-direction) scroll bar actually scrolls.

The fiddle shows two div elements; one with nowrap and one without. Also I put borders on the div to make it easier to see.

Upvotes: 1

Starx
Starx

Reputation: 79041

  • If you need a scroll bar to appear always then, you can use overflow: scroll
  • If you need vertical scroller then, overflow-y: scroll
  • If you need only horizontal scroller then, overflow-x: scroll

As per the questions title: You can write mozilla specific styles like this

@-moz-document url-prefix() {

    div.hoge {
        width: 500px;
        overflow: auto;
    }

}

Upvotes: 1

Pal Singh
Pal Singh

Reputation: 1974

overflow: auto; doesn't make scrolling DIV, use overflow: scroll; if you want it on any particular axis, then use overflow-x: scroll; or overflow-y: scroll;

Upvotes: 0

Related Questions