CODEWITHSUNDEEP
jquerymousewheel
clarkk
clarkk

Reputation: 27689

mousewheel and overflow hidden not working

Got an elemnt with overflow:hidden and an eventlistener on the mousewheel.. But nothing happens when scrolling up and down

http://jsfiddle.net/XNwbt/299/

code

$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ){
    var delta = e.wheelDelta || -e.detail;
    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    return false;
});

.scrollable {
    margin:10px;
    padding:10px;
    width:200px;
    height:100px;
    background:yellow;
    overflow:hidden;
}

Upvotes: 1

Views: 1326

Answers (2)

yckart
yckart

Reputation: 33408

It seems that delta is NaN. Try to add $.event.props.push('wheelDelta'); before your wheelhandler.

$.event.props.push('wheelDelta');
$('.scrollable').on('mousewheel DOMMouseScroll', function (e){
    var delta = e.wheelDelta || -e.detail;
    this.scrollTop += (delta < 0 ? 1 : -1) * 30;
    return false;
});

http://fiddle.jshell.net/XNwbt/301/

However, I really recommend to use Brandons mousewheel-plugin!

http://fiddle.jshell.net/XNwbt/302/

Note, that during the use of Brandons plugin, the proper way is to use the second parameter from the event-handler, to get the wheel-delta...

Upvotes: 3

Stanislav Terletskyi
Stanislav Terletskyi

Reputation: 2112

this cross browser example could help you:

if (elem.addEventListener) {
    if ('onwheel' in document) {
        // IE9+, FF17+
        elem.addEventListener ("wheel", onWheel, false);
    } else if ('onmousewheel' in document) {
        // legacy
        elem.addEventListener ("mousewheel", onWheel, false);
    } else {
        // 3.5 <= Firefox < 17
        elem.addEventListener ("MozMousePixelScroll", onWheel, false);
    }
} else { // IE<9
    elem.attachEvent ("onmousewheel", onWheel);
}

function onWheel(e) {
  e = e || window.event;
    // wheelDelta doesn't get pixels count
    var delta = e.deltaY || e.detail || e.wheelDelta;
    var info = document.getElementById('delta');
    info.innerHTML = +info.innerHTML + delta;
    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}

Upvotes: 1

Related Questions