Allow horizontal scrolling when window is a specific width with overflow-x:hidden

Question

I am creating a website and to prevent horizontal scrolling when its full screen, I have used the "overflow-x:hidden" attribute in my website's body css.

What I wanted to ask is if there is a way to allow horizontal scrolling again say once the user resize the window to 600px width or lower.

Thanks and I'd appreciate any help!

score 3 · Accepted Answer · edited May 23 '17 at 12:09

3

Yes, you can switch the value of overflow-x on-the-fly with a media query:

@media (max-width: 600px) {
    body {
        overflow-x: auto;
    }
}

Be sure to place this @media rule after your main body rule in your stylesheet, otherwise your overflow-x: hidden declaration will always take precedence.

Note also that while the width media feature corresponds to the width of the viewport, and the body element is not the same thing as the viewport, setting overflow-x this way does in fact affect scrollbars on the viewport and not the body element, which means it works as expected even if your body element is narrower than it would normally be, or you haven't removed its default margins (as authors would usually do). This is intentional behavior, though it may be overridden under certain circumstances.

edited May 23 '17 at 12:09

Community

1
1

answered Jan 27 '17 at 04:32

BoltClock

700,868
160
1,392
1,356

Why auto? It is better with scroll. I always use overflow hidden to hide it and overflow scroll enable scrolling. – undefined Jan 27 '17 at 04:58
@Zeus Zdravkov: auto hides the scrollbars when they're not needed, i.e. when overflow isn't occurring in the first place. If the asker wants the horizontal scrollbar to always be displayed even when the user won't be able to scroll horizontally anyway, they're free to use overflow-x: scroll. But I'm not sure anybody in their right mind would want to display horizontal scrollbars all the time - they're the bane of any web user's existence, and generally authors want to avoid displaying them as much as possible if they can help it. – BoltClock Jan 27 '17 at 06:24
if you are using for example bootsrap, and if somewhere there is **overflow-x: hidden**, and if you use **overflow-x: auto**, you will be unable to scroll along the x axis. If you have a stylesheet with **overflow-x: hidden**, and if you add somewhere else **overflow-x: scroll**, you will be able to scroll along the x axis. I have tested this in TestingCentre (www.testingc.ml) – undefined Jan 27 '17 at 11:18

Patrick R · Answer 2 · 2017-01-27T06:31:57.670

Add below meta tag and CSS in your page

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

CSS

body {
overflow-x:hidden;
}
.test {
width:auto;
}
@media screen and (max-width:600px) {
body {
overflow-x:auto;
}
.test {
width:600px;
}
}

HTML

<div class="test"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor nulla id lorem tristique maximus. Donec quam massa, suscipit ut sem in, pretium porttitor lacus. Cras ac venenatis neque. Integer vulputate nibh libero, quis placerat dolor accumsan sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum metus interdum vestibulum tincidunt. Nullam pellentesque at quam congue maximus. Vivamus eget mollis risus, ac bibendum turpis. Suspendisse at hendrerit nibh. Vestibulum vestibulum rhoncus augue non pulvinar. Nunc rutrum sapien eu mollis pretium.</div>

The meta tags is required to allow responsive css. If you will not add the meta tag in the page, the page will shrink. — Patrick R, Jan 27 '17 at 06:33

score -1 · Answer 3 · answered Jan 27 '17 at 04:35

-1

you can use media query

add below meta tag in your page to allow responsive css

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

and below is the css

@media only screen and (max-width: 600px) {
body{overflow-x:auto}
}

answered Jan 27 '17 at 04:35

AG_

2,589
3
20
32

1

That meta tag is not necessary. Media queries and "responsive css" don't have to be "allowed" or enabled or switched on with anything in order to work. Wherever you learned this from is teaching RWD all wrong. – BoltClock Jan 27 '17 at 04:37
please go thru with this url [link](http://stackoverflow.com/questions/14775195/is-the-viewport-meta-tag-really-necessary), its necessary for mobile devices. – AG_ Jan 27 '17 at 04:45
That's not what you said. You said "allow responsive css", and that's what I'm referring to. – BoltClock Jan 27 '17 at 04:46

Allow horizontal scrolling when window is a specific width with overflow-x:hidden

3 Answers3