Disable mouse scroll when overflow-x: hidden [CSS,HTML]

Question

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 !

what happens if you do `overflow: hidden;` instead of `overflow-x: hidden;`? — ori, Jan 31 '12 at 22:14
wow ! Thats fixes it. But no ! :( As I required overflow-y: auto ! Damn ! — Prakash Raman, Jan 31 '12 at 22:38
What about `overflow:hidden; overflow-y:auto;` ? You can use both. — Matthew, Jan 31 '12 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 becomes to us. — Matthew, Feb 04 '12 at 12:43

score 12 · Answer 1 · edited Feb 25 '14 at 19:35

12

I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.

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

edited Feb 25 '14 at 19:35

CopyDevil

21
7

answered Feb 22 '12 at 17:02

sgengler

121
2

This is the easiest and cleanest solution. – DrHall Dec 26 '13 at 18:47
1

This was a big help thanks @sgengler. You can actually use this directly on `body` if you set `overflow-x: hidden;` and `position: relative;` on it – roborourke Feb 16 '14 at 18:33

score 1 · Answer 2 · answered Jan 31 '12 at 22:47

1

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?

answered Jan 31 '12 at 22:47

Matthew

8,183
10
37
65

I have actually not put a width to the body tag. (mentioned that only to make the sizes clear). Trying the wrapper div now. – Prakash Raman Jan 31 '12 at 22:59

score -2 · Answer 3 · answered Dec 29 '14 at 20:16

-2

You must use

$("element").on('mousedown', function(e) {}

Just change live to on

answered Dec 29 '14 at 20:16

mpowroznik

1,012
7
9

Disable mouse scroll when overflow-x: hidden [CSS,HTML]

3 Answers3

Linked