CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alexandru
Alexandru

Reputation: 12902

Hide horizontal off-screen overflow of a div that has a large width

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.

Upvotes: 1

Views: 2812

Answers (3)

ihojose
ihojose

Reputation: 311

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

Upvotes: 1

Geoff James
Geoff James

Reputation: 3180

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;
}

Upvotes: 2

IrkenInvader
IrkenInvader

Reputation: 4050

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

body {
  overflow: hidden;
}

Upvotes: 2

Related Questions