PROBLEM: The contents of my div are positioned 'absolute' and the width of the contents are larger than the div. As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
PROBLEM: The contents of my div are positioned 'absolute' and the width of the contents are larger than the div. As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
Share Improve this question asked Jan 31, 2012 at 22:03 Prakash RamanPrakash Raman 13.9k29 gold badges88 silver badges137 bronze badges 4-
1
what happens if you do
overflow: hidden;instead ofoverflow-x: hidden;? – ori Commented Jan 31, 2012 at 22:14 - wow ! Thats fixes it. But no ! :( As I required overflow-y: auto ! Damn ! – Prakash Raman Commented Jan 31, 2012 at 22:38
-
What about
overflow:hidden; overflow-y:auto;? You can use both. – Matthew Commented Jan 31, 2012 at 22:50 - Consider posting more information in general about why it did not work. The more information you give back, the clearer the problem bees to us. – Matthew Commented Feb 4, 2012 at 12:43
3 Answers
Reset to default 12I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on