CODEWITHSUNDEEP
htmlcss
conartist6
conartist6

Reputation: 437

How to stop IE for scrolling *hidden* overflowed content

I have some content that overflows as part of a larger layout, which is generally wider than the page. The overflowing content is clipped by one of its containers, which is fine, except that in IE9 clicking the clipping container and using a mouse based horizontal scroll (think touchpad, ultranav, mighty mouse) causes all the content in the container to scroll until the edge of the clipped content is visible. I need to prevent this behavior while still allowing those mouse to scroll the outer container. It seems to me like capturing scroll events on that element and causing them to instead be passed to its parent would be fine, but I've not yet figured out how to get jQuery to do that. If anyone can think of a non-JS solution, that'd be cool too.

UPDATE: Some probing reveals the following: since different HID's send scrolling events differently (I'm looking at you synaptic), the only event that will always be fired is the scroll event. The scroll event has no bubbling phase and cannot be cancelled. Furthermore the results of simply setting scroll to 0 as part of the scroll handler are poor. This effectively rules out all javascript solutions that work for the majority of devices that are capable of generating input to scroll sideways. My next course of attack is through click events. Clicks do bubble, and for the undesired behavior to occur one must first click on the offending overflow:hidden div. If I can prevent focus then it will never become the target of scroll events. The real trick will be making links continue to work.

A fiddle demonstrating the issue is http://jsfiddle.net/conartist6/tnmT3/6/

HTML:

<div class="outer"><div class="ctnr"><div>Click in here and scroll r/l with wheel or midclick+drag. IE9 moves content, Chrome/FF do not.<div>The quick brown fox jumped over the lazy dog</div></div></div>
    <div style="width: 700px;">This should still scroll normally blah blah blah blah blah blah blah blah blah lajsof ijwjlk jdslf kjojfoj jjslfj sljfoi jdfoiaj ;lsajoi fejogro lfffos joidjgoe wqqqq</div></div>

CSS:

.outer
{
    width: 500px;
    overflow-x: scroll;
}
.ctnr{
    width: 300px;
    background-color: violet;
    overflow: hidden;
}
.ctnr > div
{
    position: relative;
    width: 200px;
    height: 200px;
    background-color: lightsteelblue;
}

.ctnr>div>div
{
    position: absolute;
    left:0;
    bottom: 0;
    width:400px;
    background-color: salmon;
    overflow: hidden;
}

Upvotes: 0

Views: 667

Answers (1)

Klik
Klik

Reputation: 1776

If I understand the question correctly, this should be the answer you're looking for:

*Use the id of the container that you don't want to be able to scroll.

//Firefox uses a different event that is **not cancelable** for mousewheel, of course there is a work around
//Since you only need IE though, here it is:
$('#divID').on('mousewheel', function(event) { //for all browsers except Firefox
  event.preventDefault();
});

Note: I use a touch pad, so I cannot test this, but I'm pretty sure it will work, just make sure that you target only the div (use an id tag) that you want to prevent the default action to.

For future reference, a great website for looking up DOM elements, events, and other DOM architecture, as well as compatibility, is the Dottoro Web Reference.

Just so you know, the scroll event is not cancelable, see here; however, the mousewheel event is... so here

Upvotes: 1

Related Questions