Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Css rule to make x scrollbar always hidden, but y only show if needed?

Tags:

css

scroll

In css, is there a rule(s) to make the x-scrollbar always hidden, but make the y-scrollbar show only if it goes past the page (i.e. only show if needed)?

Thanks

like image 747
omega Avatar asked Nov 07 '13 07:11

omega


People also ask

How do I make the scrollbar only appear when needed CSS?

Use overflow: auto . Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto ).

Why scroll bar is appearing when not needed?

By default, a scroll bar will appear when the content is too long. Page authors can override this in a number of ways, for example: overflow-y: hidden => cut off content that is too long. overflow-y: scroll => always show a scroll bar even when it's not needed.

How do I make my scrollbar only appear when overflow?

Add CSS. Set the overflow property to “auto”. This value adds scrollbar when the content overflows.


2 Answers

Try this:

body{overflow:hidden;overflow-y:auto;}
like image 200
codingrose Avatar answered Oct 09 '22 04:10

codingrose


this will apply to all element . so no probability of horizontal scrollbar

*{
overflow-x:hidden;
}

for the y use the element u want

body{
overflow-y:auto;
}

you can use any other div if u want

like image 27
Anobik Avatar answered Oct 09 '22 04:10

Anobik