CODEWITHSUNDEEP
javascripthtmlcss
Prakash Raman
Prakash Raman

Reputation: 13933

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

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 !

Upvotes: 4

Views: 10436

Answers (3)

mpowroznik
mpowroznik

Reputation: 1022

You must use

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

Just change live to on

Upvotes: -2

sgengler
sgengler

Reputation: 121

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

Upvotes: 12

Matthew
Matthew

Reputation: 8416

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?

Upvotes: 1

Related Questions