62

The problem is:

I have a full width bar menu, which is made by creating a big margin on the right and to the left. This margin should be cropped by overflow-x: hidden, and it is... no scroll bars, everything (visually) is ok...

But, if you drag the page (using Mac Lion) or scroll to the right, the page shows an enormous bar, which should have been cropped by the overflow-x:hidden.

CSS

html { margin:0; padding:0; overflow-x:hidden; } body { margin: 0 auto; width: 950px; } .full, .f_right { margin-right: -3000px !important; padding-right: 3000px !important; } .full, .f_left { margin-left: -3000px !important; padding-left: 3000px !important; }

Here is a link: http://jsfiddle.net/NicosKaralis/PcLed/1/

You have to open in draft to see... the jsfiddle css somehow makes it work.

@Krazer

i have and structure like this:

body div#container div#menu_bar div#links div#full_bar div#content_body ...

the #container is an centered div and has fixed width of 950px, the #full_bar is an bar that extends on the entire window, from one side to the other

if i put width 100% in #full_bar it will get only the inside width and not the width off the window

Improve this question

9 Answers 9

Reset to default
156

I had this exact same problem. I solved it by putting overflow-x: hidden; on both the body and html.

html, body { margin: 0 auto; overflow-x: hidden; } html{ padding: 0; } body { width: 950px; } .full { background: red; color: white; margin-right: -3000px !important; margin-left: -3000px !important; padding-right: 3000px !important; padding-left: 3000px !important; }
<div> <div class="full"> abc </div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

You still have the ability to scroll over, however. Even if the scroll bar isn't present, users with a mouse that allows zooming/panning/scrolling can still move the body over and see the rest.
Yes I can still scroll too...the issue is happening and I am still trying to get rid of this specially for those in ipads
THANK YOU THIS WAS THE WAY HOW IT WORKED ;D
It works for Chrome on Android, but sadly not work for iOS Chrome & Safari.
Same problem for me. Works with regular mouse but trackpads and mobile devices ignore the 'disabled scroll'.
|
55

There is another way to fix this issue with one line of code:

body { /* All your regular code including overflow-x: hidden; */ position:relative; }

This solved my issues on webkit (Mac)

Reference: http://www.tonylea.com/2010/safari-overflow-hidden-problem/

Improve this answer

4 Comments

Thanks. Just using overflow:hidden on html and body with width/height 100% didn't work without this extra line. Thanks!
I tested a lot of suggestions in similar stackoverflow questions, but this is the only one which seems to solve the issue in my case, so far. Any explanation would be interesting why this works. I found an explanation why the problem occurs here: stackoverflow.com/a/6433475/880188
No, it finally didn't work. I ended up to do the math and made sure that div's aren't wider than allowed, css calc() helped me here a lot as it allows the mixture of relative widths (vw or %) and absolute widths (px).
This causes double scroll. Any other suggestions?
12

html, body { overflow-x: hidden; width: 100%; }

Solved the issue for me, except for IE - you can still drag the site to the right if you make an effort to do so.

Using overflow: hidden; removes the vertical scrollbar, so this isn't a solution.

I couldn't manage to find a better solution using JavaScript.

Improve this answer

1 Comment

width:100% unnecessary
8

I found the solution here https://stackoverflow.com/a/9399429/622041

You'll have to put a #wrapper around your content. overflow:hidden on the body won't work.

#wrapper {position: absolute; width: 100%; overflow-x: hidden}

And here the HTML:

<html> <head> <title></title> </head> <body> <div id="wrapper"> <div class="yourContent"> ... </div> </div> </body> </html>
Improve this answer

1 Comment

This prevents native over scroll bouncing
6

I don't think there's any way to prevent scrolling of an element without using JavaScript. With JS, though, it's pretty easy to set scrollLeft to 0 onscroll.

Improve this answer

4 Comments

Can you make an instance of this so I know what you mean?
stackoverflow.com/questions/1386696/… ...........this should be it
I'm using this for a game I'm building, but it does show some noticeable jerkiness. I'd love a solution that prevents IE from scrolling at all. In my scenario, I've got a fixed height of 1000px, and about 1100px of content inside of it. The bottom 100px is supposed to never be displayed. IE likes to scroll down and display this content :(
Upon further research, I discovered -ms-scroll-limit: 0 0 0 0 (stackoverflow.com/questions/21975342/ie-overflow-hidden). This does the trick for me.
3

From Weaver's Offcanvas demo http://jasonweaver.name/lab/offcanvas/

Wrap content with:

width: 100%; overflow: hidden;

This limits only the width and has worked in similar occasions also has prevented scrolling while dragging.

Improve this answer

1 Comment

If you middle click and drag this will not solve the issue... :( sadness. A JS solution is the only thing I've found to work.
3

Try the fixed position html element, but this disable scroll both direction.

html { position: fixed; }
Improve this answer

2 Comments

This solved my problem. I was using position: absolute for my app, but this was causing scrolling sideways go to the divs which were positioned beyond the viewport intentionally to not be seen. Setting position: fixed solved it.
Worked great for me
0

How about setting the width on the content body, and warping the #container around the #menu_bar and #content_body?

body div#container div#menu_bar (absolute positioned) div#links div#full_bar div#content_body (relative positioned + padding [#menu_bar height]) ...

CSS example.

Improve this answer

7 Comments

You forget one thing, the outside div have fixed width witch make the whidth 100% useless
Alright, can you elaborate on what you are trying to achieve? Why does the outside div need to be a fixed width?
@NicosKaralis I made some edits. Let me know if this is along the lines of what you are looking for.
Sorry, out of question... I'm using rails templates... The master temPlate has the #container and the menu_bar template has the #menu_bar, that's why i can't put it separately
@NicosKaralis I made some slight modifications. Let me know if this is closer to what you are looking for.
|
-1

Consider using max-width for html.

keep me posted if it's not working.

Improve this answer

2 Comments

What do you mean by "using max-width for html"? That's a CSS property, not an HTML attribute. How would you use it?
I have a div with fixed width and inside that div an div that should have an full width

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.