CSS Media query not showing/hiding scrollbar - html

Question

#media is giving me some problems... I can' seem to figure out how to get it to work. I would like to show the scrollbars if the height/width matches the query.
Here is what I have tried :
.content {
width: 600px;
height: 600px;
background: red;
}
#media all and (max-width: 500px) {
body{
overflow-x: visible;
}
}
#media all and (max-height: 500px) {
body{
overflow-y: visible;
}
}
body {
overflow: hidden;
}
and the fiddle: http://jsfiddle.net/Ln4tg3ct/

Answer 1

Either put your #media rules last in the order or make them more specific. E.g. either this:
body {
overflow: hidden;
}
#media all and (max-width: 500px) {
body{
overflow-x: visible;
}
}
#media all and (max-height: 500px) {
body{
overflow-y: visible;
}
}
or this
#media all and (max-width: 500px) {
html body{
overflow-x: visible;
}
}
#media all and (max-height: 500px) {
html body{
overflow-y: visible;
}
}
body {
overflow: hidden;
}

Answer 2

Make sure that your body style is listed before the media queries. Instead of using visible use scroll. In your JSFiddle, try this:
.content {
width: 600px;
height: 600px;
background: red;
}
body {
overflow: hidden;
}
#media all and (max-width: 500px) {
body{
overflow-x: scroll;
}
}
#media all and (max-height: 500px) {
body{
overflow-y: scroll;
}
}

Answer 3

by default, the scrollbar is visible in all. did you hide it in global CSS or something?
even on mobile, it's still visible but it's small and shows when you scroll then hides automatically.
anyway, I did the opposite to hide scrollbar #media. I tried the following on Firefox, Opera, and Chrome. work fine:
#media only screen and (max-width: 975px) {
/* hide scrollbar on Firefox */
html {
scrollbar-width: none;
}
/* hide scrollbar on Chrom & Opera */
html::-webkit-scrollbar {
display: none;
width: 0px;
}