1

How do I hide the horizontal, off-screen overflow of a <div> that has a large width set on it? For example:

HTML:

<div class="example">
</div>

CSS:

.example {
  height: 100px;
  width: 10000px;
  background-color: black;
  position: absolute;
  overflow: hidden;
}

Here is an example fiddle that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.

Edit: Adding hidden overflow-x on the parent element does not work on small width iOS devices.

Alexandru
  • 12,264
  • 17
  • 113
  • 208
  • You mean the window scroll bar? – Taplar Nov 17 '17 at 20:55
  • 1
    body { overflow-x: hidden; } – Vinay Sharma Nov 17 '17 at 20:57
  • Helpful hint: you're on the right track with the `overflow: hidden;`, but this sets the overflow to hide for anything *inside* of the `.example` container. You need to set the `overflow: hidden` property on the container that the `.example` `div` is in. Plus, if it's only *horizontal* overflow you want to hide, then you need to use `overflow-x`, as suggested above. – Geoff James Nov 17 '17 at 21:00
  • try here for the ios https://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari – IrkenInvader Nov 17 '17 at 22:46
  • Thanks gents. In my particular situation (which is a bit different than what I wrote in the question), I wrapped my video tag with another div with position: absolute, overflow-x: hidden, and 100% height/width – Alexandru Nov 18 '17 at 03:08

3 Answers3

2

You can set overflow: hidden on the elements container. In this case it's the body.

body {
  overflow: hidden;
}
IrkenInvader
  • 4,030
  • 1
  • 12
  • 23
  • This sets *all* overflow to hide (both x & y; horizontal & vertical) ergo no scrollbars at all. If - as mentioned in the OP - you need just the horizontal overflow hidden (and/or the use of vertical scrolling), use `overflow-x`. – Geoff James Nov 17 '17 at 21:01
2

You're nearly there!

Setting the overflow of the .example class is only hiding any overflowing content inside of it, though.

You would need to set the overflow of the parent container of .example, for this to work - i.e. whatever container it is inside of.

As you mentioned in your OP, you want to hide horizontal scrollbars.

For this, you would need to set

overflow-x: hidden

But (as mentioned), be sure this is on the parent container of .example.

This could be the body, or another div etc. HTH.

e.g.:

body, .parent-container {
    overflow-x: hidden;
}
Geoff James
  • 3,122
  • 1
  • 17
  • 36
1

You can use overflow-x: hidden in CSS to hidde only horizontal scroll.

ihojose
  • 312
  • 2
  • 12